Browse Source

Replace qrcode module

* Use npm to install qrcode npm module
* Use Browserify to create wrapped bundle
feature/npm-qrcode
Sven Seeberg 4 months ago
parent
commit
d90c3eb092
Signed by: sven.seeberg
GPG Key ID: 29559DD5A83806B5
  1. 1
      .gitignore
  2. 8
      README.md
  3. 2908
      bundle.js
  4. 14
      index.html
  5. 17
      main.js
  6. 3808
      package-lock.json
  7. 6
      package.json

1
.gitignore vendored

@ -0,0 +1 @@
node_modules

8
README.md

@ -1,5 +1,11 @@
This is a simple web based QR code generator. It is available at https://qrcode.netzbegruenung.de.
Build `bundle.js`:
```
npm install
npx browserify main.js --s QRCodeWrapper -o bundle.js
```
Used software:
- https://github.com/davidshimjs/qrcodejs
- https://www.npmjs.com/package/qrcode
- https://getbootstrap.com/

2908
bundle.js

File diff suppressed because it is too large Load Diff

14
index.html

@ -5,12 +5,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Netzbegrünung QRCode Generator</title>
<link href="bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="qrcode.min.js"></script>
<script src="bundle.js"></script>
<link href="qrcode.css" rel="stylesheet">
</head>
<body class="text-center">
<main class="form-qrcode">
<form>
<script type="text/javascript">
function generate_qrcode() {
var wrapper = new QRCodeWrapper(document.getElementById("canvas"), document.getElementById("floatingInput").value);
wrapper.render();
}
</script>
<form onsubmit='generate_qrcode();'>
<div class="form-floating">
<img class="mb-4" src="https://blog.netzbegruenung.de/files/2013/10/netzbegruenung-logo-website.png" alt="" height="57">
<h1 class="h3 mb-3 fw-normal">QR Code Generator</h1>
@ -20,10 +26,10 @@
<label for="floatingInput">Adresse / Text</label>
</div>
<button type='button' class="w-100 btn btn-lg btn-primary" onclick='document.getElementById("qrcode").innerHTML=""; new QRCode(document.getElementById("qrcode"), document.getElementById("floatingInput").value);'>Generieren</button>
<button type='button' class="w-100 btn btn-lg btn-primary" onclick='generate_qrcode();'>Generieren</button>
</form>
<div class="text-center m-4" id="qrcode" style=""></div>
<div class="text-center m-4" id="qrcode" style=""><canvas id="canvas"></canvas></div>
</main>
</body>
</html>

17
main.js

@ -0,0 +1,17 @@
var QRCode = require('qrcode');
class QRCodeWrapper {
constructor(canvas, inputText) {
this.canvas = canvas;
this.inputText = inputText;
}
render() {
QRCode.toCanvas(this.canvas, this.inputText, function (error) {
if (error) console.error(error)
console.log('success!');
});
}
}
module.exports = QRCodeWrapper;

3808
package-lock.json generated

File diff suppressed because it is too large Load Diff

6
package.json

@ -0,0 +1,6 @@
{
"dependencies": {
"browserify": "^17.0.0",
"qrcode": "^1.5.0"
}
}
Loading…
Cancel
Save