如何使用带有固定扫描画布的 Quagga 创建条码扫描仪

问题描述

我使用的是 Nuxt 2.15.4 并使用 Quagga2。我想创建一个像移动扫描仪这样的扫描仪，其中摄像头是全屏的，并且有一个蓝色矩形，条形码必须放在里面，扫描后会有一条红线穿过条形码画布。使用 Quagga.js 我可以操作画布中的 CSS 和 area 属性，但它会导致两个问题：

1. 实际的扫描区域会被弄乱，我不知道扫描的确切位置。
2. 成功的红线风格将被搞砸。

此外，在成功扫描后，我需要红色线条保留且不会消失，并且在一段时间内不会发生扫描（因此我可以决定继续扫描或对结果执行某些操作）。

这是我在应用程序中实现的代码（在激活 torch 和 zoom 时也需要帮助）：

<template>
    <section id="container" class="container">
      <div id="interactive" class="viewport"></div>
      {{code}}
    </section>
</template>

<script>
import Quagga from '@ericblade/quagga2';
export default {
  data() {
    return {
      code:[]
    };
  },methods:{
    async checkDevice() {
      let md = navigator.mediaDevices;
      if (!md || !md.enumerateDevices) return false;
      const devices = await navigator.mediaDevices.enumerateDevices();
      return devices.some((device) => "videoinput" === device.kind);
    },initQuagga(){
      Quagga.init({
        inputStream : {
          name : "Live",type : "LiveStream",area: {
            top: "0%",right: "0%",left: "0%",bottom: "0%",},locate: false,decoder : {
          readers : [
            "ean_reader",],}
      },(err)=>{
        if(err){
          return
        }
        // this.checkCapabilities();
        this.startQuagga()
      });
    },// checkCapabilities(){
    //   var track = Quagga.CameraAccess.getActiveTrack();
    //   var capabilities = {};
    //   if (typeof track.getCapabilities === 'function') {
    //       capabilities = track.getCapabilities();
    //   }
    //   this.applySettingsVisibility('zoom',capabilities.zoom);
    //   this.applySettingsVisibility('torch',capabilities.torch);
    // },// applySetting: function(setting,value) {
    //     var track = Quagga.CameraAccess.getActiveTrack();
    //     if (track && typeof track.getCapabilities === 'function') {
    //         switch (setting) {
    //         case 'zoom':
    //             return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
    //         case 'torch':
    //             return track.applyConstraints({advanced: [{torch: !!value}]});
    //         }
    //     }
    // },startQuagga(){
      Quagga.start()
      Quagga.onProcessed(function (result) {
        let drawingCtx = Quagga.canvas.ctx.overlay,drawingCanvas = Quagga.canvas.dom.overlay;
        if (result) {
          if (result.Boxes) {
            drawingCtx.clearRect(0,parseInt(drawingCanvas.getAttribute("width")),parseInt(drawingCanvas.getAttribute("height")));
            result.Boxes.filter(function (Box) {
              return Box !== result.Box;
            }).forEach(function (Box) {
              Quagga.ImageDebug.drawPath(Box,{x: 0,y: 1},drawingCtx,{color: "#00F",linewidth: 2});
            });
          }
          if (result.Box) {
            Quagga.ImageDebug.drawPath(result.Box,{color: "#008",linewidth: 2});
          }
      
          if (result.codeResult && result.codeResult.code) {
            Quagga.ImageDebug.drawPath(result.line,{x: 'x',y: 'y'},{color: 'red',linewidth: 3});
          }
        }
      })
      Quagga.onDetected(this.onDetected);
    },onDetected(data) {
      let barCodeData = data.codeResult.code;
      console.log(barCodeData);
    },async mounted(){
    let data = await this.checkDevice();
    if (data) {
      this.initQuagga();
    }
  },beforeDestroy(){
    Quagga.stop()
  }
}
</script>

<style lang="scss">
#container {
  width: 640px;
  margin: 20px auto;
  padding: 10px;
}

#interactive.viewport {
  width: 640px;
  height: 480px;
}


#interactive.viewport canvas,video {
  float: left;
  width: 640px;
  height: 480px;
}

#interactive.viewport canvas.drawingBuffer,video.drawingBuffer {
  margin-left: -640px;
}
</style>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）