问题描述：
【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=https://www.it610.com/article/datauri;
//如果你不想Uint8ClampedArray RGBA 全部返回0的话，用promise包起来是个好主意
return new Promise((resolve) => {
img.onload = () => {
ctx.drawImage(img, 0, 0,300,300);
let data = https://www.it610.com/article/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;
}
})
})
},
};
识别
进阶：
可以结合webRTC实时识别。有大佬已经实现了，参考链接https://github.com/dragonir/h...
