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

问题描述

问 题

把图片画在 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);

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

然而元素还是空的。

这是为什么？

解决方案

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

这篇关于javascript - 这样把 imageData 作为 src 属性写入 &lt;img&gt; 元素为什么会失败？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！