一、需求描述

识别二维码图片中的内容

二、寻找工具

首先要找看看有哪些可用的识别二维码图片插件。
问了chatGPT，它给了几种插件选择：Zxing-js/library、QuaggaJS、jsQR、react-qr-reader、react-qr-scanner。
但是上面几种都不适用我的项目，最终选择了@zxing/browser。

三、实现方案

以下是基于react16+的项目使用例子

1. 首先安装npm依赖

cnpm i @zxing/browser --save
cnpm i @zxing/library --save

2. 封装方法

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))
      }
    })
  }

3. 调用识别二维码图片方法，传人图片url。

const imgUrl = "http://*****"
handleDecode(imgUrl)

4. 以上方法使用于已经能拿到二维码url的场景，若二维码图片是用本地上传拿到的等其他形式，可以自己去库里找对应的方法 ⬇️
   https://github.com/zxing-js/browser#readme

三、以下是噼里啪啦吐槽一番遇到的坑，可以忽略

1. 首先就是找插件的途中，遇到了较多问题，用了chatGPT推荐的几种插件，发现都会报错，有的是兼容问题，有的是使用的时候，识别的方法就是报错了，但是还得看源码研究它的实现方法就比较麻烦，果断换下一个插件。最后还是zxing比较靠谱，而且还是用了它的衍生插件才成功。
2. 插件找到了，但是遇到图片跨域的问题，这里真的想说chatGPT骗得我好惨，就因为我用的免费版是吧。用了几种解决方案都不行，还得是谷歌靠谱，最终通过转成base64的方式，才解决了这个问题，一开始仅仅设置了crossOrigin是没有用的。

参考文档
https://github.com/zxing-js/browser#readme