HTML5 Canvas 元素未出现在已编译的 Android 离子但在浏览器“离子服务”中有效

Question

我在 Ionic 4 项目中使用 face-api.js 来检测来自相机 stream 的人脸。 但是，检测 canvas 仅适用于浏览器ionic serve ，并且在我将其编译为 Android apk 后不起作用。 我可以看到我的所有模型都加载到 Android 调试控制台中，但没有一个<canvas>附加到我的 html 中。 我哪里做错了？

页.html

<ion-row>
  <ion-col class="ion-text-center" size="12">
    <div #videoContainer></div>
    <div>
      <canvas id="canvas" width="640" height="480"></canvas>
    </div>
<ion-col>

页面.ts

  videoLoad() {
    this.elementRef.nativeElement.querySelector('video')
      .addEventListener('play', async () => {

        const labeledFaceDescriptors = await this.loadLabeledImages()
        const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)

        const displaySize = { width: this.video.width, height: this.video.height }

        const canvas = <HTMLCanvasElement>document.getElementById('canvas')


        faceapi.matchDimensions(canvas, displaySize)

        await faceapi.nets.tinyFaceDetector.loadFromUri('https://www.test.com/models');
        await faceapi.nets.faceLandmark68Net.loadFromUri('https://www.test.com/models');
        await faceapi.nets.faceRecognitionNet.loadFromUri('https://www.test.com/models');
        await faceapi.nets.faceExpressionNet.loadFromUri('https://www.test.com/models');
        await faceapi.nets.ssdMobilenetv1.loadFromUri('https://www.test.com/models');

        setInterval(async () => {

          const detections = await faceapi.detectAllFaces(this.video, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks().withFaceDescriptors().withFaceExpressions()
          const resizedDetections = faceapi.resizeResults(detections, displaySize)

          const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))

          const ctx: CanvasRenderingContext2D = canvas.getContext("2d")

          ctx.clearRect(0, 0, canvas.width, canvas.height)
          results.forEach((result, i) => {
            const box = resizedDetections[i].detection.box
            const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
            if (result.label == 'unknown') {

            } else {
              console.log(result.label);
            }
            drawBox.draw(canvas)
          })
        }, 800)
      })
  }

Answer 1

我面临着类似的问题......我在 canvas 上动态绘制图像，但使用 --prod 后它没有正确显示......