关于前端:AntDjsQr做一个简单的前端二维码识别

问题形容：

在 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…