1<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <title>JavaScript QR Code Generator</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 <meta https-equiv="X-UA-Compatible" content="ie=edge" />
8 <link rel="stylesheet" href="style.css" />
9 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
10 <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
11 </head>
12 <body>
13 <div class="QRWrapper">
14 <div class="QRWrapperInner">
15 <div class="QRfield">
16 <input id="qr-text" type="text" placeholder="Text to generate QR code"/>
17 <button class="qr-btn" onclick="generateQRCode()">Create QR Code</button>
18 </div>
19 <div class="qr-code-result">
20 <p id="qr-result">This is deault QR code:</p>
21 <canvas id="qr-code"></canvas>
22 </div>
23 </div>
24 </div>
25
26 <script>
27 /* JS comes here */
28 var qr;
29 (function() {
30 qr = new QRious({
31 element: document.getElementById('qr-code'),
32 size: 200,
33 value: 'https://blog.stackfindover.com/'
34 });
35 })();
36
37 function generateQRCode() {
38 var qrtext = document.getElementById("qr-text").value;
39 document.getElementById("qr-result").innerHTML = "QR code for " + qrtext +":";
40 //alert(qrtext);
41 qr.set({
42 foreground: '#0f62fe',
43 size: 200,
44 value: qrtext
45 });
46 }
47 </script>
48 </body>
49</html>
1var qrcode = new QRCode("test", {
2 text: "http://jindo.dev.naver.com/collie",
3 width: 128,
4 height: 128,
5 colorDark : "#000000",
6 colorLight : "#ffffff",
7 correctLevel : QRCode.CorrectLevel.H
8});
9
1<div id="qrcode"></div>
2<script type="text/javascript">
3new QRCode(document.getElementById("qrcode"), "http://jindo.dev.naver.com/collie");
4</script>
5