AntD+jsQr做一个简单的前端二维码识别

问题描述：

在antD中前端做一个二维码识别功能，时间紧，做了一个简陋版。

原料：

antD upload控件+jsQR
原料链接：
【jsQR】 https://github.com/cozmo/jsQR
【AntD Upload】 https://ant-design.gitee.io/c...

思路：

获取upload上传的二维码图片，使用jsQR识别

补充：
upload可以获得File对象，也就是可以获得一个base64图片，将base64画在canvas上，再通过getImageData获取到jsQR需要的Uint8ClampedArray数据。

简易代码：

getBase64=(file)=>{
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);  });
 }
imageAppendCanvas=(datauri)=>{
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width=500;
      canvas.height=500;
      // document.body.append(canvas);//如果想看看这个图片的话
      const img = new Image();
      img.src=datauri;
      //如果你不想Uint8ClampedArray RGBA 全部返回0的话，用promise包起来是个好主意😑
      return new Promise((resolve) => {
        img.onload = () => {
          ctx.drawImage(img, 0, 0,300,300);
          let data = ctx.getImageData(0, 0, 300, 300).data;
          resolve(data);
        };
      });
  };

const props = {
      name: 'file',
      showUploadList:false,
      customRequest(fileObj){
        getBase64(fileObj.file).then(rs =>{
          imageAppendCanvas(rs).then(res=>{
            const code = jsQR(res, 300, 300);
            if (code) {
                const {data}=code;
            }
          })
        })
      },
    };
<Upload {...props}>
  <div>识别</div>
</Upload>

进阶：
可以结合webRTC实时识别。有大佬已经实现了，参考链接https://github.com/dragonir/h...