在项目中需求是上传设备的二维码图片来提交绑定到该账户

所要用到的库是
jsQR
一个纯粹的 javascript 二维码阅读库。 此库接收原始图像，并将定位、提取和解析中找到的任何二维码。

// gitee 仓库地址
https://gitee.com/mirrors/jsQR

[1].安装

npm install jsqr --save

[2].引用

import jsQR from "jsqr";

[3].使用
本项目使用的ui库为elemen-ui 在其中的 el-upload 组件中 on-change事件处理。

1）首先需要将图片转为Base64格式

  // 文件转base 64
  getBase64(file) {
      return new Promise(function(resolve, reject) {
        let reader = new FileReader();
        let imgResult = "";
        reader.readAsDataURL(file);
        reader.onload = function() {
          imgResult = reader.result;
        };
        reader.onerror = function(error) {
          reject(error);
        };
        reader.onloadend = function() {
          resolve(imgResult);
        };
      });
    },

2. 在 on-change事件中处理

handleChange(file){
     let _this = this;
     // 转 base 64
     this.getBase64(file.raw).then((res) => {
        let img = new Image();
        img.src = res;
        img.onload = function() {
          //  base64
          var c = document.getElementById("qrcanvas");
          var ctx = c.getContext("2d");

          //  记一个坑，这里高度得除以2 , 图片会拉伸
          ctx.drawImage(img, 0, 0, img.width, img.height / 2);
          var imageData = ctx.getImageData(0, 0, img.width, img.height);

          // 再进行识别
          const code = jsQR(imageData.data, imageData.width, imageData.height);

          if (code) {
            console.log("Found QR code:", code.data);
          } else {
            _this.$message("图片无对应二维码");
          }
        };
      });
}

其中 code.data就是识别出来的二维码。