使用 jsQR 识别图片中的二维码

• 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下载