如何从javascript中的imageData生成图像? [英] How to generate an Image from imageData in javascript?
本文介绍了如何从javascript中的imageData生成图像?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道是否有任何方法从imageData创建一个新的图像,这是以前从一个画布元素获得?
I would like to know if there is any way to create a new Image from imageData, which was previously obtained from a canvas element?
我搜索过一个解决方案,但他们似乎都把结果画到画布上。
所以基本上我需要一个方法来将ImageData对象直接转换为Image。
I've searched for a solution, but they all seem to be drawing the result to a canvas. So basically I need a way to convert an ImageData object to Image directly, if its possible.
推荐答案
在Canvas中使用 toDataURL 方法。
它使图像数据作为数据URI。
You can use toDataURL method in Canvas. It makes a image data as Data URI.
var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);
var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);
如果您想知道用户的浏览器支持Data URI Scheme,可以使用此函数。
If you want to know user's browser supports Data URI Scheme, You can use this function.
function useSafeDataURI(success, fail) {
var img = document.createElement("img");
img.onerror = function () {
fail();
};
img.onload = function () {
success();
};
img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // insert a dot image contains 1px.
}
这篇关于如何从javascript中的imageData生成图像?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文