jsQR库识别二维码 

<html>
    <head>
        <meta charset="utf-8" />
        <title>jsQR库识别二维码</title>
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
    </head>
    <body>
        <canvas id="qrcanvas" style="display:none;"></canvas>
        <span lan_id="bc">选择二维码</span> <input type="file"  id="codeChange"/>
        <div>
            <h2>识别结果：</h2>
            <ul id="result">
            </ul>
        </div>
    </body>
    <script type="text/javascript">
        $("#codeChange").change(function () {
            var $this = $(this);
            var file = $this[0].files[0];
            //置空连续上传
            //$this.val('');
      
            var fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onloadend = function(e) {
                var base64Data = e.target.result;
                base64ToQR(base64Data)
            }
        });

        function base64ToQR(data) {
            var qrcanvas = $("#qrcanvas");
            var ctx = qrcanvas.get(0).getContext('2d');

            var img = new Image();
            img.src = data;
            img.onload = function() {
                qrcanvas.attr("width",img.width)
                qrcanvas.attr("height",img.height)
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var imageData = ctx.getImageData(0, 0, img.width, img.height);
                const code = jsQR(imageData.data, imageData.width, imageData.height, {
                    inversionAttempts: "dontInvert",
                }); 
                if(!code){
                    alert("识别二维码错误")
                }
                showCode(code.data)
            };
        }
        
        function showCode(code){
            $("#result").append("<li>"+code+"</li>")
        }
    </script>
</html>

 

posted @ 2024-06-20 16:56  echo曦  阅读(534)  评论(0)    收藏  举报