vue解析二维码

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)
      }