什么是 jsqr
jsqr 是一个使用纯 JavaScript 实现的 QR 代码解码器，可以用于解码二维码和条形码。
jsqr 可以通过 npm 安装，在前端项目中进行使用，方便快捷。
安装
可以通过 npm 命令安装 jsqr：
npm install jsqr
使用
使用 jsqr 解码二维码和条形码的过程主要分为两步：获取图像数据和解码。
获取图像数据
jsqr 支持多种图像数据格式，包括 Canvas、Image、Video 等。
Canvas
<canvas id="qr-canvas"></canvas>
const canvas = document.getElementById('qr-canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);Image
<img id="qr-image" src="qr-code.png" />
const img = document.getElementById('qr-image');
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);Video
<video id="qr-video" autoplay></video>
const video = document.getElementById('qr-video');
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);解码
import jsQR from 'jsqr';
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log('解码结果：', code.data);
} else {
console.log('未能识别二维码或条形码');
}示例代码
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------- ---- ---------------
-------
------
------ ---- ------------
-----
------ ------------- ----------- ------------ -----------------
------- -------------- ----------- ----------------------
------
------- --------------
------ ---- ---- ------------------------------------
----- ----- - ------------------------------------
----- ------ - -------------------------------------
----- --- - ------------------------
----- ----------- - - ------ ------ ------ - ----------- ------------- - -- -- -----
---------------------------------------------------------------------
-------- --------------------- -
--------------- - -------
---------------------------------------- -------- -- -
-------------- -- -
-------------------- -- -- ------------- ---------------
----- --------- - ------------------- -- ------------- ---------------
----- ---- - -------------------- ---------------- ------------------
-- ------ -
-----------------------
-
-- -----
---
-
---------
-------
-------这是一个简单的扫描二维码的示例页面，使用了摄像头捕捉视频，将视频画面实时绘制在 Canvas 上，再进行解码。可以通过修改 constraints 对象以及 Canvas 和 Video 的宽高来调整扫码器的外观和体验。
总结
在前端项目中使用 jsqr 可以轻松实现二维码和条形码的扫描和解码功能，大大提高了用户体验和交互性。需注意获取图像数据的格式和解码的方法，可根据具体应用场景进行调整。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/56805