Ionic 4 在画布上改变图像源后绘制图像。

Question

我正在做一个应用程序，我在画布上显示图像，但图像源来自父页面。

一切都是工作文件，但当我改变图像Src的按钮点击，它显示一个空白的画布。之后，当我点击div之外的新图片时，就会显示正常。

预览页面.html

<ion-content no-padding>
  <img #img src="{{imgSrc}}" style='display: none;' />
  <canvas #imageCanvas (touchstart)="startDrawing($event)"></canvas>
</ion-content>

和 预览页.ts

export class PreviewBoxPage implements OnInit, AfterViewInit, AfterViewChecked {
  @ViewChild('previewImg', {static: false}) waterMarkImage: ElementRef;
  @ViewChild('imageCanvas', {static: false}) canvas: ElementRef;
  @ViewChild('img', {static: false}) img: ElementRef;

  @ViewChild(Platform , {static: false}) content: Platform;
  canvasElement: HTMLCanvasElement;
  private element: HTMLImageElement;

  private ctx: CanvasRenderingContext2D;

  @Input()
  imgSrc;    

  ngAfterViewInit() {
    this.canvasElement = this.canvas.nativeElement;
    this.element = this.img.nativeElement;

    this.canvasElement.width =  this.plt.width();
    this.canvasElement.height = 270;

    this.ctx = this.canvasElement.getContext('2d');
  }

  ngAfterViewChecked() {

    this.ctx.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height);
    this.ctx.drawImage(this.element, 0, 0);
  }}

谁来给我解释一下。已经一个星期了，我找不到解决办法。

Answer 1

唯一的问题是，图像来自在线网站。它是花了一些时间在加载.所以我只是添加了 (load) 事件

  <img #img [src]="imgSrc" (load)="onImageLoad($event)" style='display: none;' />

然后在page.ts中设置该功能。

onImageLoad(event) {
}

现在工作正常了:)