Vue项目扫描条码

Vue工程扫描条码

时隔半年，我终于克服了懒癌，回到了csdn创作区，成功补坑，可喜可贺可喜可贺

步骤一

先找到扫描条码的必备要素-quagga.js文件，这个可以去
找了一下，应该是这个网站https://serratus.github.io/quaggaJS/
先npm安装一下插件

步骤二
在自己的Vue项目中main.js文件中写入以下代码

import Quagga from 'quagga'
// 挂载到vue全局
//官网的方法在我的项目里不起作用，我只能这么加载了
Vue.prototype.$Quagga = Quagga 

步骤三
上代码

       //HTML
       <el-col :lg="10" :md="16" :xs="24">
          <div class="grid-content">
            <div class="titletext">扫描</div>
            <el-card class="box-card">
              <video id="camera" autoplay width="300" height="485"></video>
              <canvas id="canvas" width="800" height="800" hidden="hidden"></canvas>
              <img id="Tagimg" style="display:none" src="" alt=""/>
            </el-card>
            <div style="height:20px"></div>
            <div style="text-align:left">
              <el-input id="barCode" v-model="barCode" style="width:50%" placeholder="此处为识别的条码号"></el-input>
              <el-tooltip class="item" effect="light" content="年轻人不讲武德" placement="right-start">
                <el-button type="success" icon="el-icon-check" circle @click="forgetLove"></el-button>
              </el-tooltip>
            </div>
          </div>
        </el-col>

//参数不一定都在
return{
	barCode: '',//条码
    videoobj: null,//视频对象(全局)
}

//JS
    //摄像头开启
    camerastart() {
      let constraints = { video: { facingMode: { exact: 'environment' }  } ,audio:false  };
      let video = document.getElementById("camera"); //video标签的对象？展示的区域？
      //获得Canvas对象
      let canvas = document.getElementById("canvas");
      let Context = canvas.getContext("2d");
      //调用摄像头
      let promise = navigator.mediaDevices.getUserMedia(constraints); //好像现在这样调用是主流方法
      promise.then(mediaStream => {
          this.videoobj =  mediaStream.getTracks();
          try {
            video.srcObject = mediaStream;
          } catch (error) {
            console.log(error);
            video.src = window.URL.createObjectURL(mediaStream);
          }
          video.play();
        })
        .catch(err => {
          this.$message.error("调用摄像头失败，请检查摄像头连接是否有问题。错误信息：" + err);
        });
      //每过1秒获取一次图片
      const getimgsetInterval2 = setInterval(() => {this.takephoto(video,canvas,Context)}, 1000);
      this.$once('hook:beforeDestroy', () => {            
        clearInterval(getimgsetInterval2);                                    
      })
    },
    //拍照
    takephoto(video,canvas,Context) {
      Context.drawImage(video, 0, 0);
      // toDataURL  ---  可传入'image/png'  ---默认, 'image/jpeg'
      let imgurl = canvas.toDataURL("image/png");
      //调用识别方法
      this.analysisbarcode(imgurl);//如果img不好使，就用imgurl
    },
    //识别二维码
    analysisbarcode(imgpath) {
      this.$Quagga.decodeSingle({
        src: imgpath,
        numOfWorkers: 0,  // Needs to be 0 when used within node
        inputStream: {
          size: 800  // restrict input-size to be 800px in width (long-side)
        },
        decoder: {
          readers: ["code_128_reader"] // List of active readers
        },
      }, function(result) {
        if(result.codeResult) {
          alert(result.codeResult.code);
          //由于歪比八卜的原因，Vue的参数在这没起作用，就用原生的js先顶着
          document.getElementById('barCode').value = result.codeResult.code;
        } else {
          console.log("not detected");
        }
      });
    },
    forgetLove(){
      this.barCode = document.getElementById('barCode').value;
    }

总结
以上就是所有的代码了，我感觉黄色代码块的背景色更好看一点