这样把 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 下执行