android - HTML5 Canvas元素不会出现在已编译的Android Ionic中，但可以在浏览器“Ionic Serve”中使用

Question

我在Ionic 4项目中使用了face-api.js来从相机流中检测人脸。但是，检测画布只能在浏览器ionic serve中工作，而在将其编译为Android apk后则无法工作。我可以看到所有模型都已加载到Android调试控制台中，但是没有<canvas>附加到我的html中。我在哪里做错了？

page.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>

page.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

我正面临类似的问题...我正在画布上动态绘制图像，但使用--prod后无法正确显示...