初识html5使用jsQR识别二维码

1.了解jsQR

jsQR是一个纯javascript脚本实现的二维码识别库，不仅可以在浏览器端使用，而且支持后端node.js环境。jsQR使用较为简单，有着不错的识别率。

2.简单实践

主要文件包括1.html、jquery-3.4.1.min.js、jsQR.js和待识别的图片。

1.html内容：

        

            
        
        

            QR码内容：
            
        
        

            
        

读取文件的脚本：

        $("#pictureSelect").change(function (event) {
            var file = event.target.files[0];
            if(window.FileReader) {
                var fileReader = new FileReader();
                fileReader.readAsDataURL(file);
                fileReader.onloadend = function(event) {
                    var base64Data = event.target.result;
                    base64ToqR(base64Data)
                }
            }
        })

解析二维码的脚本：

        function base64ToqR(data) {
            var objCanvas = document.getElementById("qrCanvas");
            var ctx = objCanvas.getContext("2d"); // 返回值是CanvasRenderingContext2D类的对象实例。
     
            var image = new Image();
            image.src = data;

            image.onload = function() {
                ctx.drawImage(image, 0, 0, image.width, image.height); // 绘图

                var imageData = ctx.getImageData(0, 0, image.width, image.height);

                // QR码解析
                const code = jsQR(
                    imageData.data,   // 图像数据
                    imageData.width,  // 宽度
                    imageData.height, // 高度
                    {
                        // 可选的对象
                        inversionAttempts: "dontInvert",
                    }
                );

                if(code){
                    $("#result")[0].innerHTML =code.data;
                }else{
                    $("#result")[0].innerHTML ="";
                    alert("识别错误")
                }
            };
        }

3.jsQR的优点

jsQR是一个完全独立的javascript脚本库，可以用于扫描QR码。

它不限制于任何平添，可以轻松地扫描前端网络摄像头流、用户上传的图像。

如果使用jsQR扫描网络摄像头流，则需要从视频流中提取图像数据。接着可以将其传递给jsQR。

4.资料下载

github: https://github.com/cozmo/jsQRhttp://jsQR

上述例子代码：

https://download.csdn.net/download/nmmking/85748521https://download.csdn.net/download/nmmking/85748521