• webworker解决jsQR执行慢,耗费性能的问题
• jsQr解决图片二维码识别问题

直接上代码

主线程

export default function readImageQrCode(src){
// src 就是url图片地址或者base64 图片地址return new window.Promise( (resolve, reject) => {let imgDom = new Image();imgDom.src = src;imgDom.onload =  () => {const canvas = document.createElement('canvas');canvas.width = imgDom.width;canvas.height = imgDom.height;const ctx = canvas.getContext('2d');// 将图片画到 canvas 上ctx.drawImage(imgDom, 0, 0, imgDom.width, imgDom.height)// 从 canvas 中提取像素数据const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);// 将像素数据作为输入，使用 jsQR 库进行解码const workerJsPath = '/qrWorker.js';let worker = new Worker(workerJsPath);worker.postMessage({data: imageData.data,width: imageData.width,height: imageData.height,});worker.onmessage = function (event) {if(event){let code = event.data;resolve(code && code.data || '');worker.terminate(); // 关闭worker;}}}imgDom.onerror = function (){reject('');}})
}

qrWorker.js

importScripts('jsQR.js');
// https://github.com/cozmo/jsQR/blob/master/dist/jsQR.js
// 使用jsQR识别图片中的二维码.
self.addEventListener('message', function (e) {const imageData = e.data;const code = jsQR(imageData.data, imageData.width, imageData.height);console.log('使用jsQR扫描图片中的二维码成功', code);self.postMessage(code);
}, false);

使用

	readImageQrCode(info.url).then((res) => {console.log(res);}).catch((err) => {});

相关文档

Web Worker
借助jsQR简简单单在H5中识别图片中的二维码
jsQR下载