1

我正在尝试在 Angular 2 中使用 QuaggaJS。该项目使用路由，因此当单击添加页面时，QuaggaJS 应加载 Javascript 文件，如下所示：

<script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../dist/quagga.js" type="text/javascript"></script>
<script src="live_w_locator.js" type="text/javascript"></script>

但是，这些不会加载。有一个提供的 quagga.d.ts 文件允许使用 QuaggaJS API，但我不知道如何使用它。

Javascript 文件是否需要像 typescript 组件一样导入到项目中？

组件文件：

ngOnInit() {
    console.log(this);
    let state = {
      inputStream: {
        type : "LiveStream",
        constraints: {
          width: {min: 640},
          height: {min: 480},
          facingMode: "environment",
          aspectRatio: {min: 1, max: 2}
        }
      },
      locator: {
        patchSize: "medium",
        halfSample: true
      },
      numOfWorkers: 4,
      decoder: {
        readers : [{
          format: "code_128_reader",
          config: {}
        }]
      },
      locate: true
    };

    Quagga.init(state, (err) => {
      if (err) {
        return console.log(err);
      }

      Quagga.start();
    });

    Quagga.onProcessed(this.onProcessed);

    Quagga.onDetected(this.logCode);

  }

  onProcessed(result: any) {
    var drawingCtx = Quagga.canvas.ctx.overlay,
    drawingCanvas = Quagga.canvas.dom.overlay;

    if (result) {
      if (result.boxes) {
        drawingCtx.clearRect(0, 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: "green", lineWidth: 2});
        });
      }

      if (result.box) {
        Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
      }

      if (result.codeResult && result.codeResult.code) {
        Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
      }
    }
  }

  logCode(result) {
    this.lastResult = result.codeResult.code;
    console.log(this);
  }
4

0 回答 0