MaxInterview - read qr code from image javascript

showing results for - "read qr code from image javascript"

19 Aug 2019

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>

source

Evann

16 Sep 2017

1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>Decode QRCode from image using javascript</title>
6    </head>
7    <body>
8        <input type="button" id="action" value="Decode"/>
9        <script type="text/javascript" src="grid.js"></script>
10        <script type="text/javascript" src="version.js"></script>
11        <script type="text/javascript" src="detector.js"></script>
12        <script type="text/javascript" src="formatinf.js"></script>
13        <script type="text/javascript" src="errorlevel.js"></script>
14        <script type="text/javascript" src="bitmat.js"></script>
15        <script type="text/javascript" src="datablock.js"></script>
16        <script type="text/javascript" src="bmparser.js"></script>
17        <script type="text/javascript" src="datamask.js"></script>
18        <script type="text/javascript" src="rsdecoder.js"></script>
19        <script type="text/javascript" src="gf256poly.js"></script>
20        <script type="text/javascript" src="gf256.js"></script>
21        <script type="text/javascript" src="decoder.js"></script>
22        <script type="text/javascript" src="qrcode.js"></script>
23        <script type="text/javascript" src="findpat.js"></script>
24        <script type="text/javascript" src="alignpat.js"></script>
25        <script type="text/javascript" src="databr.js"></script>
26        <script>
27            var imageURI = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIAAAEiAQMAAABncE31AAAABlBMVEX///8AAABVwtN+AAABA0lEQVRoge3ZUQ6CMAzG8SYcwCNx9R2JA5jU0a6ARKIP60z0/z0wZD+fmm1siBBCCPmfaMu93t/sEk8KKlv5jwrq3VT7jO4dqEy1lsT65mVS92vBUAOVKupbKmYm1DhljffpB/MXqp/aVmQfIuXNuo3qp46p4KIHlaFiTKzXRdrS4GszKlnJHCPBhkgF2z9RyWqvkNWlUdWrOqL6qZiP2kuoVWivGipT+cAosfsNOqHy1cm34txOuwBUhtKW2Hf52Zu8XLdRnVWxZtt3+duQ3gU1QD2d+kSFBDVUFX8ytZcj1Eh1OHMWQQ1Q1kSF2hb4ev5CdVTHFVl1/86FSleEEEJ+PQ/ANYzwx13NHQAAAABJRU5ErkJggg==";
28            function decodeImageFromBase64(data, callback){ qrcode.callback = callback; qrcode.decode(data) }
29            document.getElementById("action").addEventListener('click',function(){
30                decodeImageFromBase64(imageURI,function(decodedInformation){
31                    alert(decodedInformation);
32                });
33            },false);
34        </script>
35    </body>
36</html>