寻找一款高效的JavaScript二维码识别库：jsQR

发表时间: 2023-03-28 17:39

jsQR库

jsQR是一个纯粹的JavaScript二维码阅读库。该库接收原始图像，并将定位、提取和解析其中找到的任何二维码。不需要开发APP、公众号和小程序，也能在网页实现二维码扫码功能！

安装使用

在 npm 上可用。可以在 Node.js 程序中使用，也可以与模块捆绑器（如 Webpack 或 Browserify）一起使用。

npm install jsqr --save

// ES6 importimport jsQR from "jsqr";// CommonJS requireconst jsQR = require("jsqr");jsQR(...);

浏览器

或者对于前端使用 jsQR.js可以包含在脚本标记中

<script src="jsQR.js"></script><script>  jsQR(...);</script>

关于网络摄像头的说明

jsQR 被设计为一个完全独立的库，用于扫描 QR 码。根据设计，它不包含任何特定于平台的代码。这使其能够轻松扫描前端网络摄像头流、用户上传的图像或用作后端 Node.js 过程的一部分。

如果要使用 jsQR 扫描网络摄像头流，则需要从视频流中提取图像数据。然后可以将其传递给 jsQR。jsQR 演示包含网络摄像头扫描的准系统实现，可用作起点并根据您的需求进行定制。对于更高级的问题，您可以参考getUserMedia文档或相当全面的webRTC示例代码，这两者都是使用网络摄像头流的重要资源。

用法

jsQR 导出一个方法，该方法接受 3 个参数，表示您要解码的图像数据。此外，还可以采用选项对象来进一步配置扫描行为。

const code = jsQR(imageData, width, height, options?);if (code) {  console.log("Found QR code", code);}

参数

imageData- 形式的 RGBA 像素值。因此，此数组的长度应为。此数据与 ImageData 接口的形式相同，并且通常也由节点模块返回以读取图像。Uint8ClampedArray[r0, g0, b0, a0, r1, g1, b1, a1, ...]4 * width * height
width- 您要解码的图像的宽度。
height- 您要解码的图像的高度。
options（可选）- 其他选项：inversionAttempts - (attemptBoth (默认值), dontInvert, onlyInvert, invertFirst)

返回值

如果 QR 能够解码，则库将返回具有以下键的对象。

binaryData - Uint8ClampedArray- 二维码的原始字节。
data- 二维码数据的字符串版本。
chunks- 二维码块。
version- 二维码版本。
location- 带有描述二维码关键点的钥匙的对象。每个键都是形式的一个点。具有以下位置的积分。{x: number, y: number}角落-topRightCorner/topLeftCorner/bottomRightCorner/bottomLeftCorner;查找器模式 -topRightFinderPattern/topLeftFinderPattern/bottomLeftFinderPattern也可能有一个点，假设存在并且可以定位。bottomRightAlignmentPattern

由于库是用typescript编写的，因此您还可以查看类型定义以了解 API。

实现h5调用摄像头扫码识别二维码

完整代码：

<html><head>    <meta charset="utf-8">    <title>jsQR Demo</title>    <script src="./jsQR.js"></script>    <link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">    <style>        body {            font-family: 'Ropa Sans', sans-serif;            color: #333;            max-width: 640px;            margin: 0 auto;            position: relative;        }        #githubLink {            position: absolute;            right: 0;            top: 12px;            color: #2D99FF;        }        h1 {            margin: 10px 0;            font-size: 40px;        }        #loadingMessage {            text-align: center;            padding: 40px;            background-color: #eee;        }        #canvas {            width: 100%;        }        #output {            margin-top: 20px;            background: #eee;            padding: 10px;            padding-bottom: 0;        }        #output div {            padding-bottom: 10px;            word-wrap: break-word;        }        #noQRFound {            text-align: center;        }    </style></head><body><h1>jsQR Demo</h1><p>Pure JavaScript QR code decoding library.</p><div id="loadingMessage"> Unable to access video stream (please make sure you have a webcam enabled)</div><canvas id="canvas" hidden></canvas><div id="output" hidden>    <div id="outputMessage">No QR code detected.</div>    <div hidden><b>Data:</b> <span id="outputData"></span></div></div><script>    var video = document.createElement("video");    var canvasElement = document.getElementById("canvas");    var canvas = canvasElement.getContext("2d");    var loadingMessage = document.getElementById("loadingMessage");    var outputContainer = document.getElementById("output");    var outputMessage = document.getElementById("outputMessage");    var outputData = document.getElementById("outputData");    function drawLine(begin, end, color) {        canvas.beginPath();        canvas.moveTo(begin.x, begin.y);        canvas.lineTo(end.x, end.y);        canvas.lineWidth = 4;        canvas.strokeStyle = color;        canvas.stroke();    }     // 打开手机上安装后置摄像头    navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {        video.srcObject = stream;      // 阻止IOS视频全屏        video.setAttribute("playsinline", true);         video.play();        requestAnimationFrame(tick);    });    function tick() {        loadingMessage.innerText = "Loading video..."        if (video.readyState === video.HAVE_ENOUGH_DATA) {            loadingMessage.hidden = true;            canvasElement.hidden = false;            outputContainer.hidden = false;            canvasElement.height = video.videoHeight;            canvasElement.width = video.videoWidth;            canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);            var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);            var code = jsQR(imageData.data, imageData.width, imageData.height, {                inversionAttempts: "dontInvert",            });            if (code) {                drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");                drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");                drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");                drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");                outputMessage.hidden = true;                outputData.parentElement.hidden = false;                outputData.innerText = code.data;            } else {                outputMessage.hidden = false;                outputData.parentElement.hidden = true;            }        }        requestAnimationFrame(tick);    }</script></body></html>

扫码效果

扫码识别结果

识别图片二维码

参考上面代码，只要取到图片base64数据传给jsQR的方法即可。