全部文章

26 01月

Javascript 二维码识别 jsQR

jsQR

一个纯粹的 javascript 二维码阅读库。 此库接收原始图像，并将定位、提取和解析中找到的任何二维码。

演示

安装

NPM

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

npm install jsqr --save

// ES6 import
import jsQR from "jsqr";

// CommonJS require
const jsQR = require("jsqr");

jsQR(...);

浏览器

另外，对于前端，可以将 jsQR.js 包含在 script 标签中。

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

关于网络摄像头的注释

jsQR 是一个完全独立的库，用于扫描QR代码。按设计，它不包括任何特定于平台的代码。这使得它可以轻松地扫描前端网络摄像头流、用户上传的图像，后端 node.js 进程的一部分使用。

如果要使用 jsQR 扫描网络摄像头流，则需要从视频流中提取 ImageData。然后可以将其传递给 jsQR。jsQR 演示 包含一个网络摄像头扫描的准框架实现，可以作为起点，并根据您的需要进行定制。有关更高级的问题，您可以参考 getUserMedia 文档 或相当全面的 webRTC 示例代码，这两种代码都是使用网络摄像机流的很好资源。

手机体验

用法

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

const code = jsQR(imageData, width, height, options?);

if (code) {
  console.log("Found QR code", code);
}

参数

  • imageData - 格式为 [r0, g0, b0, a0, r1, g1, b1, a1, ...] 的 Uint8ClampedArray 的 rgba 像素值。

因此，这个数组的长度应该是 4 * width * height。 此数据与 ImageData 接口的形式相同

  • width - 要解码的图像的宽度。
  • height - 要解码的图像的高度。
  • options (可选) - 其他选项
    • inversionAttempts - (attemptBoth (default), dontInvert, onlyInvert, or invertFirst) - Should jsQR attempt to invert the image to find QR codes with white modules on black backgrounds instead of the black modules on white background. This option defaults to attemptBoth for backwards compatibility but causes a ~50% performance hit, and will probably be default to dontInvert in future versions.

返回值

如果一个二维码能够被解码，库将返回一个具有以下键的对象。

  • binaryData - Uint8ClampedArray - 二维码的原始字节。
  • data - 二维码数据的字符串版本。
  • location - 有描述二维码关键点的键的对象。每个键都是形式x:数字，y:数字的点。具有以下位置的点。
    • 角 - topRightCorner/topLeftCorner/bottomRightCorner/bottomLeftCorner;
    • 定位点位置 - topRightFinderPattern/topLeftFinderPattern/bottomLeftFinderPattern
    • 也可能返回 bottomRightAlignmentPattern， 前提是存在并且可以定位该点。

Post Author: admin