Элемент HTML5 Canvas не отображается в скомпилированном Android Ionic, но работает в браузере Ionic Serve - PullRequest
Новая
       8

Элемент HTML5 Canvas не отображается в скомпилированном Android Ionic, но работает в браузере Ionic Serve

1 голос
/ 04 октября 2019

Я использовал face-api.js в своем проекте Ionic 4, чтобы обнаружить лицо из потока камеры. однако холст обнаружения работает только в браузере 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)
      })
  }

1 Ответ

0 голосов
/ 24 октября 2019

У меня похожая проблема ... Я динамически рисую изображение на холсте, но оно не отображается правильно после использования --prod ...

...