Question

我想知道是否有任何方法可以从imageData创建一个新的Image，以前是从canvas元素中获取的？

我已经搜索了一个解决方案，但他们似乎都将结果绘制到画布上。所以基本上我需要一种方法将ImageData对象直接转换为Image，如果可能的话。

Answer 1

之前的答案都没有提供问题的答案，因为它是在主题中呈现的 - 从ImageData获取图像。所以这是一个解决方案。

function imagedata_to_image(imagedata) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = imagedata.width;
    canvas.height = imagedata.height;
    ctx.putImageData(imagedata, 0, 0);

    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
}

Answer 2

您可以在Canvas中使用 toDataURL 方法。它将图像数据作为数据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);

如果您想知道用户的浏览器支持数据URI方案，您可以使用此功能。

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.
}

Answer 3

假设这是你的画布

<canvas id='mycanvas'></canvas>

您可以使用

获取图像的表示

var imgData = document.getElementById('mycanvas').toDataURL();

然后，您可以通过更改其来源

将其放入常规图像标记中

<img id='myimage'/>

document.getElementById('myimage').src = imgData;

Answer 4

许多现代浏览器都支持数据URI方案。

如果您有图像数据，可以使用JavaScript设置img元素的src属性。

请看以下示例： http://www.websiteoptimization.com/speed/tweak/inline-images/

如何在javascript中从imageData生成图像？

4 个答案: