一、需求描述
识别二维码图片中的内容
二、寻找工具
首先要找看看有哪些可用的识别二维码图片插件。
问了chatGPT，它给了几种插件选择：Zxing-js/library、QuaggaJS、jsQR、react-qr-reader、react-qr-scanner。
但是上面几种都不适用我的项目，最终选择了@zxing/browser。
三、实现方案
以下是基于react16+的项目使用例子
- 首先安装npm依赖
cnpm i @zxing/browser --save
cnpm i @zxing/library --save
- 封装方法
import { BrowserQRCodeReader } from '@zxing/browser'
/**
* 解码二维码图片
* @param {*} imageUrl 二维码图片url
*/
export const handleDecode = async (imageUrl) => {
const codeReader = new BrowserQRCodeReader()
const img = document.createElement('img')
const base64Str = await imgUrlToBase64(imageUrl)
img.src = base64Str
// 等待图片加载完成
await new Promise((resolve) => {
img.onload = resolve
})
codeReader.decodeFromImageElement(img).then((result) => {
console.log('二维码图片内容', result.text)
}).catch((err) => {
console.warn('二维码图片解码失败了', err)
})
}
/**
* 将图片转为base64
* @param {*} imgUrl 图片url
* @returns
*/
const imgUrlToBase64 = (imgUrl) => {
function toBase64(image) {
const canvas = document.createElement('canvas')
canvas.width = image.width
canvas.height = image.height
const ctx = canvas.getContext('2d')
ctx.drawImage(image, 0, 0, image.width, image.height)
const base64 = canvas.toDataURL('image/png')
return base64
}
return new Promise((resolve, reject) => {
const image = new Image()
image.setAttribute('crossOrigin', 'anonymous') // 解决跨域
image.crossOrigin = '*'
image.src = `${imgUrl}&v=${Math.random()}`// 解决图片URL缓存问题
image.onload = () => {
resolve(toBase64(image))
}
})
}
- 调用识别二维码图片方法，传人图片url。
const imgUrl = "http://*****"
handleDecode(imgUrl)
- 以上方法使用于已经能拿到二维码url的场景，若二维码图片是用本地上传拿到的等其他形式，可以自己去库里找对应的方法 ⬇️
https://github.com/zxing-js/browser#readme
三、以下是噼里啪啦吐槽一番遇到的坑，可以忽略
- 首先就是找插件的途中，遇到了较多问题，用了chatGPT推荐的几种插件，发现都会报错，有的是兼容问题，有的是使用的时候，识别的方法就是报错了，但是还得看源码研究它的实现方法就比较麻烦，果断换下一个插件。最后还是zxing比较靠谱，而且还是用了它的衍生插件才成功。
- 插件找到了，但是遇到图片跨域的问题，这里真的想说chatGPT骗得我好惨，就因为我用的免费版是吧。用了几种解决方案都不行，还得是谷歌靠谱，最终通过转成base64的方式，才解决了这个问题，一开始仅仅设置了crossOrigin是没有用的。
