Replace qrcode module
* Use npm to install qrcode npm module * Use Browserify to create wrapped bundle
This commit is contained in:
parent
e066f97a98
commit
d90c3eb092
|
@ -0,0 +1 @@
|
|||
node_modules
|
|
@ -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/
|
||||
|
|
14
index.html
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>
|
||||
|
|
|
@ -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;
|
File diff suppressed because it is too large
Load Diff
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"browserify": "^17.0.0",
|
||||
"qrcode": "^1.5.0"
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue