DOMException：使用PaperJS渲染图像流时，无法在'CanvasRenderingContext2D'上执行'drawImage'

Question

我启动了一个有关从WiFi摄像机实时直播台球桌的项目，该项目具有一些图像处理功能。我需要交互式按钮，突出显示等，所以我选择PaperJS lib来渲染台球桌图像流。

此代码大多数时候都可以正常工作，但有时例如1-15分钟一次，我收到一个错误消息： error

我每250ms设置一个间隔调用组件刷新函数，该函数会更改Image对象的src属性，该属性是base64编码的jpg。似乎有时无法正确加载图像，并且出现此错误。但是奇怪的是，一个损坏的图像可以破坏所有Image / Raster对象，并且流永远停止。我不知道如何重新启动它，而无需刷新页面。你会建议解决我的问题吗？

import {Component, ElementRef, OnInit} from '@angular/core';
import {ViewChild} from '@angular/core';
import {DataService} from "../../shared/service/data.service";
import {PaperScope, Point, Project, Raster, Group} from 'paper';
import {environment, tableConfig} from "../../../environments/environment";
import {PoolTableService} from "../../shared/service/pool.table.service";
import {PoolTableModel} from "../../shared/model/pool.table.model";
import {BallModel} from "../../shared/model/ball.model";

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  width = tableConfig.width * tableConfig.scale;
  height = tableConfig.height * tableConfig.scale;
  image: any;
  divisionLines: number = 0;
  ballsHighlight: number = 0;

  tableObject: PoolTableModel;
  cueBalls: BallModel[];

  scope: PaperScope;
  project: Project;

  constructor(private dataService: DataService, private poolTableService: PoolTableService) {
    setInterval(() => {
      this.refreshComponent();

      console.log(this.project.activeLayer.children["raster"]);
    }, 1000 / environment.fps);
  }

  ngOnInit() {
    this.getDivision();
    this.getPoolTableObject();
  }

  @ViewChild('poolTableView') poolTableView: ElementRef;

  ngAfterViewInit(): void {

    this.image = new Image();
    this.scope = new PaperScope();
    this.project = new Project(this.poolTableView.nativeElement);

    this.initalizeCanvas();
    this.refreshComponent();
  }

  initalizeCanvas(): void {
    let raster = new Raster({
      image: this.image,
      name: "raster",
      position: new Point(this.width /2, this.height /2)
    });
    raster.scale(tableConfig.scale, tableConfig.scale);

    let solids = new Group();     // bile "całe"
    solids.name = "solids";

    let stripes = new Group();    // bile "połówki"
    stripes.name = "stripes";

    let lines = new Group();
    lines.name = "lines";
  }

  refreshComponent(): void {
    this.getPoolTableObject();
    this.getDivision();
    this.getHighlight();
  }

  getPoolTableObject(): void {
    this.poolTableService
      .getPoolTableObject()
      .subscribe(response => {
        this.tableObject = response;
        this.image.src = "data:image/jpg;base64," + this.tableObject.tableImage;
        this.cueBalls = response.balls;
      }, error => {
        console.error(error);
      });
  }

  getDivision(): void {
    this.dataService
      .getDivisionLines()
      .subscribe(response => {
        this.divisionLines = parseInt(response.division);
      }, error => {
        console.error(error);
      });
  }

  getHighlight(): void {
    this.dataService
      .getCueBallsHighlight()
      .subscribe(response => {
        this.ballsHighlight = parseInt(response.highlight);
      }, error => {
      console.error(error);
    });
  }


}

:host {
  width: 95%;
  display: block;
  margin: 3%;
}

.image-container
{
  width: 1024px;             /* TU ZMIENIAĆ WIELKOŚĆ STOŁU*/
  height: 768px;
  margin-left: auto;
  margin-right: auto;
  max-height: 1000px;
  border: 3px black solid;
}

.main-canvas {
}

<div class="image-container">
  <canvas #poolTableView class="main-canvas" width="{{width}}" height="{{height}}"></canvas>
  <app-cueballs [project]="project" [cueBalls]="cueBalls" [ballsHighlight]="ballsHighlight"></app-cueballs>
  <app-divisionlines [project]="project" [divisionLines]="divisionLines"></app-divisionlines>
</div>