js实现二维码识别
二维码识别实现方法
在JavaScript中实现二维码识别通常需要借助第三方库，以下是几种常见的方法：
使用jsQR库
jsQR是一个纯JavaScript实现的二维码识别库，适用于浏览器环境：
// 安装：npm install jsqr 或直接引入CDN
import jsQR from 'jsqr';
function decodeQRCode(imageData) {
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log('Found QR code', code.data);
return code.data;
}
return null;
}
// 从canvas获取图像数据示例
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
decodeQRCode(imageData);使用ZXing（Zebra Crossing）库
ZXing是一个功能更强大的开源条码处理库，有JavaScript移植版本：
// 使用@zxing/library
import { BrowserQRCodeReader } from '@zxing/library';
const codeReader = new BrowserQRCodeReader();
codeReader.decodeFromInputVideoDevice(undefined, 'video-element-id')
.then(result => console.log(result.text))
.catch(err => console.error(err));基于HTML5和getUserMedia实现摄像头扫描
结合浏览器API实现实时摄像头扫描：
const video = document.getElementById('qr-video');
const canvas = document.getElementById('qr-canvas');
const context = canvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then(stream => {
video.srcObject = stream;
video.play();
requestAnimationFrame(tick);
});
function tick() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height);
if (code) {
console.log('Found QR code:', code.data);
}
}
requestAnimationFrame(tick);
}性能优化建议
- 降低检测频率，不要每帧都检测
- 限制检测区域，只在画面中心区域检测
- 对图像进行预处理（灰度化、二值化）
- 使用Web Worker将识别过程放到后台线程
注意事项
- 浏览器安全策略要求摄像头使用必须在HTTPS环境或localhost
- 移动端浏览器可能需要用户明确授权
- 不同库对模糊、倾斜的二维码识别能力有差异
以上方法可以根据具体需求选择，jsQR适合简单场景，ZXing功能更全面但体积较大，实时扫描需要处理性能优化问题。
