在項目中需求是上傳設(shè)備的二維碼圖片來提交綁定到該賬戶

所要用到的庫是
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）首先需要將圖片轉(zhuǎn)為Base64格式

  // 文件轉(zhuǎn)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;
     // 轉(zhuǎn) 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);

          // 再進(jìn)行識別
          const code = jsQR(imageData.data, imageData.width, imageData.height);

          if (code) {
            console.log("Found QR code:", code.data);
          } else {
            _this.$message("圖片無對應(yīng)二維碼");
          }
        };
      });
}

其中 code.data就是識別出來的二維碼。