观察者画布背景src动态生成

Question

首次加载画布时，background.src 为空。 在对话框中（对话框在第二个组件中）我上传IMG但成功后background.src仍然是空的，我需要刷新应用程序才能获得background.src = this.src;。

上传后如何设置observable更改background.src再次调用this.src = this.srcService.getImgURL(this.id) // returned string 'https://something.com/image/1234'，因为画布已经加载？

或者也许是其他东西而不是可观察的？

我尝试在后台 src 上设置超时时间为 1 秒，这是可行的，但 setTimeout 不是在我们的应用程序中使用的选项。

不能使用background.onload = () => {...}，因为在此之前我需要 src。

谢谢

第一个组件

export class FirstComponent implements AfterViewInit {
  @ViewChild('canvas', { static: true }) canvas: ElementRef<HTMLCanvasElement>;

  ngAfterViewInit() {
  this.src = this.srcService.getImgURL(this.id) // returned string 'https://something.com/image/1234'
  const background = new Image();
  background.src = this.src;
}
}

第二部分 第二个组件是我选择并上传图片的对话框

 export class SecondComponent implements {
       constructor( @Inject(MAT_DIALOG_DATA) public data: IInterface,
                    public dialogRef: MatDialogRef<SettingsComponent>) 
    ( ... )
      close() {
         this.dialogRef.close(null);
       }
    }

Answer 1

图像加载后，您还应该使用 2d 上下文将背景设置为画布：

ngAfterViewInit() {
  this.src = this.srcService.getImgURL(this.id);
  const background = new Image();
  background.src = this.src;
  background.onload = () => {
    const ctx = this.canvas.getContext("2d");
    ctx.drawImage(background, 0, 0);
  }
}