0

我在 Angular 8.2 中使用 QuaggaJS 插件。我有这个代码，如下所示。

组件.ts

Quagga.init({
  inputStream: {
    name: "Live",
    type: "LiveStream",
    target: document.querySelector('#scanner-container'),
    constraints: {
      width: 480,
      height: 320,
      facingMode: "environment"
    },
  },
  decoder: {
    readers: [
      "code_128_reader",....,],
    debug: {
      showCanvas: true,....,
      boxFromPatches: {
        showTransformed: true,...,
      }
    }
  },

}, function (err) {
  if (err) {
    return
  }
  Quagga.start();
});
Quagga.onProcessed(function (result) {
  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 });
    }
  }
});

在 component.scss

canvas.drawing, canvas.drawingBuffer {
  position: absolute;
  left: 0;
  top: 0;
}

在 component.html 中

<div id="scanner-container"></div>

此代码显示此结果我不明白为什么条码图像中没有绿线。请问你有什么想法吗？我已经关注了这个

4

0 回答 0