vue + element 上传组件 解析二维码
npm 下载 jsqr 库
npm install jsqr – save
<!-- 创建一个canvas标签-->
<canvas id="myCanvas" width="600" height="600" style="display: none"></canvas>
//引入jsqr 库
import jsqr from 'jsqr';
data(){
return{
isqrcode: false,//显示提醒文字
qrcode: '' //二维码
}
}
// 解析二维码
analysisQrcode(file){
return new Promise((resolve)=>{
var img = new Image();
var reader = new FileReader()
reader.readAsDataURL(file);
reader.onload = function(e) {
img.src = e.target.result;
var myCanvas = document.getElementById('myCanvas');
var myCanvaswd = myCanvas.getContext('2d');
img.onload = function () {
myCanvaswd.drawImage(img, 0, 0, 600, 600);
var imageData = myCanvaswd.getImageData(0, 0, 600, 600);
let data = {
qrcode: '',
isqrcode: true
}
data.qrcode = jsqr(imageData.data, imageData.width, imageData.height, {
inversionAttempts: "dontInvert",
});
if (data.qrcode == null){
data.isqrcode = false
}
resolve(data)
}
}
})
},
//上传成功前的回调
async beforeAvatarUpload(file) {
let data = await this.analysisQrcode(file)
console.log(data)
}