pc端实现扫描二维码

npm install jsqr

pc端实现扫描二维码

          <el-form-item label="扫描二维码:" prop="dimensionalCode">
            <el-input
              placeholder="请扫描"
              style="width: 400px"
              v-model="form.dimensionalCode"
            >
              <template slot="append">
                <span @click="saomaFn" class="pointer pointerArea">扫描</span>
              </template>
            </el-input>
            <input
              style="display: none"
              ref="uploadQR"
              type="file"
              accept="image/png, image/jpeg"
              @change="changeFile"
            />
            <img v-show="false" id="myimg" />
            <canvas id="mycanvas" style="display: none" />
          </el-form-item>

   import jsQR from "jsqr";
   
    saomaFn() {
      this.$refs.uploadQR.click();
    },
    changeFile(e) {
      var that = this;
      that.result = "请上传二维码";
      console.log(e.target.files[0].name, "erweima");
      //文件读取
      var fileReader = new FileReader();
	//文件读取成功事件【onload 】
      fileReader.onload = function(event) {
        var data = event.target.result;  //图片被处理成base64格式
        var img = document.getElementById("myimg");
        img.src = data;

        img.onload = function() {
          var mycanvas = document.getElementById("mycanvas");
          var ctx = mycanvas.getContext("2d");
          // canvas 的width/height重新设置的时候会清空画布
          mycanvas.width = img.width;
          mycanvas.height = img.height;
		//绘制图片ctx.drawImage(图片对象, x位置, y位置)【canvas的左上角位置为(0, 0)】
          ctx.drawImage(img, 0, 0);
          var imageData = ctx.getImageData(0, 0, img.width, img.height);
          console.log(imageData);

          const code = jsQR(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: "dontInvert",
          });
          if (code) {
            console.log(code.data);
            that.form.dimensionalCode = code.data;
            console.log(that.form.dimensionalCode, "that.form.dimensionalCode");
          } else {
            that.$message.error("请上传二维码图片");
            console.log("识别错误");
          }
        };
      };
      fileReader.readAsDataURL(e.target.files[0]); 
    },

readAsDataURL 方法会读取指定的 Blob或 File对象，同时result属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容
getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据context.getImageData(x,y,width,height);