Question

我正在使用打字稿将用户上传的图像设置为画布背景。但是，由于某些绑定问题，它仅在用户两次上传文件时才起作用。在尝试将图像设置为画布背景之前，我该如何等待图像加载？

我尝试仅在selectedFile变量不为null时运行画布代码（请参见下文），但我遇到相同的错误。

<input type="file" (change)="onFileChanged($event)">
<canvas id="canvas"></canvas>

private selectedFile: File = null;
private imgURL: any;

onFileChanged(event){
    if(event.target.files.length == 0)  return;
    this.selectedFile = <File> event.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(this.selectedFile);
    reader.onload = (_event) => {this.imgURL = reader.result;}

    var canvas : any = document.getElementById("canvas");
    var ctxt = canvas.getContext("2d");
    var background = new Image();
    background.src = this.imgURL;
    background.onload = function () {
      ctxt.drawImage(background, 0, 0, canvas.width, canvas.height);
    };
}

我希望画布将所选图像显示为背景。但是，用户第一次上传图像时，输出为GET http://localhost:4200/undefined 404 (Not Found) Image (async)。当用户上传其他图像时，背景会更新为第一个选定的图像。

Answer 1

我认为您需要做的就是将画布代码放在reader.onload回调中。

onFileChanged(event) {
  if (event.target.files.length == 0) return;
    this.selectedFile = < File > event.target.files[0];
    var reader = new FileReader();
    reader.readAsDataURL(this.selectedFile);

    reader.onload = (_event) => {
      this.imgURL = reader.result;
      var canvas: any = document.getElementById("canvas");
      var ctxt = canvas.getContext("2d");
      var background = new Image();
      background.src = this.imgURL;
      background.onload = function() {
      ctxt.drawImage(background, 0, 0, canvas.width, canvas.height);
    };
  }
}

您可能会遇到错误，因为您的.onload异步回调尚未触发，并且在尝试使用它时this.imgURL === undefined也未触发。现在，它等待直到我们拥有imgURL的值，然后才能使用它。

如何立即将上传的图像显示为画布背景？

1 个答案: