这样把 imageData 作为 src 属性写入 <img> 元素为什么会失败？

Question

把图片画在 canvas 里后调用其 toDataURL 方法得到 imageData 的字符串，把它写入新的<img>，插入 DOM：

  const getImageData = (imageUrl) => {    let image = new Image();
    image.src = imageUrl;    let canvas = document.createElement('canvas');
    canvas.setAttribute('width', 300);
    canvas.setAttribute('height', 300);
    canvas.getContext('2d').drawImage(image, 0, 0, 300, 300);    return canvas.toDataURL();
  };  let i = document.createElement('img')
  i.src = getImageData('./vue-logo.png');  document.body.appendChild(i);

执行后控制台里是这样的，

然而元素还是空的。

这是为什么？

Answer 1

原因是图片没onload完毕就toDataURL()， toDataURL()应该放在image.onload 下执行