关于前端: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...