完成 onload 事件后如何运行函数？答案

【问题标题】：how to run a function after finish onload event?完成 onload 事件后如何运行函数？
【发布时间】：2020-01-09 01:27:55
【问题描述】：

resizeImage() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const maxW = 400;
  const maxH = 400;
  const image1 = new Image();
  image1.src = this.uploadedImage;
  const iw = image1.width;
  const ih = image1.height;
  const scale = Math.min((maxW / iw), (maxH / ih));
  const iwScaled = iw * scale;
  const ihScaled = ih * scale;
  canvas.width = iwScaled;
  canvas.height = ihScaled;
  if (image1.complete) {
    console.log('test');
    context.drawImage(image1, 10, 10, iwScaled, ihScaled);
    this.initialImage = canvas.toDataURL();
    document.getElementById('imgcanvas').src = canvas.toDataURL();
    this.cropImage(canvas.toDataURL());
  } else {
    image1.onload = function drawImage() {
      console.log('what')
      context.drawImage(image1, 10, 10, iwScaled, ihScaled);
      this.initialImage = canvas.toDataURL();
      document.getElementById('imgcanvas').src = canvas.toDataURL();
      this.cropImage(canvas.toDataURL);
    };
  }
},

如何在完成 onload 事件后调用函数？因为我收到一个错误，指出 this.cropImage 不是函数。有没有人可以帮我解决这个错误，我需要在获取 url 后调用cropImage 函数？

!!!!更新：我看到 context.drawImage 仍然无法正常工作

【问题讨论】：

根本问题是img调用.drawImage时还没有完成加载。你需要在你的图片组件中监听@load 事件。
@YongQuan ya 我明白了，并已修复，但出现了一个错误，我无法在 onload 事件后调用函数，正如我在上述问题中编辑后所说的那样？

标签： javascript vue.js canvas antd

【解决方案1】：

问题与您的调用上下文有关，您的函数调用内部的this 不是您所期望的外部的this。

一种简单的解决方法是使用箭头函数：

    image1.onload = _ => {
      console.log('what')
      context.drawImage(image1, 10, 10, iwScaled, ihScaled);
      setTimeout(_ => {
        this.initialImage = canvas.toDataURL();
        document.getElementById('imgcanvas').src = canvas.toDataURL();          
        this.cropImage(canvas.toDataURL);
      }, 100);
    };

【讨论】：

是的，这个箭头函数是修复函数错误。但仍然在重新检查后，错误也是由于画布没有绘制任何图像而我在 onload 函数中控制台图像 1 它显示正确的数据但是当控制台 this.initialImage 时，它们是空数据。
@KhairulHabib 此时 drawImage 被堆积到要重新绘制的 DOM 上，它不会像您期望的那样出现在下一行。我能想到的唯一可以轻松绕过这个问题的技巧是使用超时，这不是一个优雅的解决方案，但可能会起作用。

【解决方案2】：

我尝试在 onload 完成后重新运行 resizeImage() 函数，以便它运行 image1.complete 条件。我知道它安静而不优雅，但这只是现在的工作功能。但如果有人能以更好的方式解决这个问题，我仍然很高兴

【讨论】：

【解决方案3】：

将 image1.src 放在 image1.onload 之后：

resizeImage() {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  const maxW = 400;
  const maxH = 400;
  const image1 = new Image();

  const iw = image1.width;
  const ih = image1.height;
  const scale = Math.min((maxW / iw), (maxH / ih));
  const iwScaled = iw * scale;
  const ihScaled = ih * scale;
  canvas.width = iwScaled;
  canvas.height = ihScaled;
  if (image1.complete) {
    console.log('test');
    context.drawImage(image1, 10, 10, iwScaled, ihScaled);
    this.initialImage = canvas.toDataURL();
    document.getElementById('imgcanvas').src = canvas.toDataURL();
    this.cropImage(canvas.toDataURL());
  } else {
    image1.onload = function drawImage() {
      console.log('what')
      context.drawImage(image1, 10, 10, iwScaled, ihScaled);
      this.initialImage = canvas.toDataURL();
      document.getElementById('imgcanvas').src = canvas.toDataURL();
      this.cropImage(canvas.toDataURL);
    };
  }

  image1.src = this.uploadedImage;

}

【讨论】：

抱歉，它不起作用，context.drawImage 仍然不起作用，也没有绘制任何东西