javascript - 这样把 imageData 作为 src 属性写入 <img> 元素为什么会失败?
本文介绍了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 属性写入 <img> 元素为什么会失败?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文