时间戳

首页 > 解决方案 > 如何立即将上传的图像显示为画布背景？

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

问题描述

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

我试图仅在selectedFile变量不为空时运行画布代码（见下文），但我遇到了同样的错误。

<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). 当用户上传不同的图像时，背景会更新为第一个选择的图像。

标签： htmlangulartypescript

解决方案

我认为您需要做的就是将您的画布代码放入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 的值后才使用它。

推荐阅读