如何在JavaScript中从ImageData生成图像？

Question

我想知道是否有办法从之前从画布元素获得的ImageData中创建一个新的Image。

我已经搜索了解决方案，但它们似乎都是将结果绘制到画布上。

如果可能的话，我需要一种将ImageData对象直接转换为Image的方法。

- YemSalat

---

请将HTML画布捕获为GIF、JPG、PNG或PDF格式。详见https://dev59.com/ynNA5IYBdhLWcg3wh-YC - Alex Pacurar

太棒了！正是我想要的。 - YemSalat

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

- skoll

---

虽然不是十分明确，但我认为提问者寻求的答案不涉及在过程中绘制到画布上。 - Magnus Lind Oxlund

Answer 2

您可以在 Canvas 中使用 toDataURL 方法，它可以将图像数据转换为 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，您可以使用这个函数。

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

- David Shim

---

也许我错了，但问题不是要求相反的吗？如何从一个ImageData对象中获取图像？ - A. Matías Quezada

Answer 3

假设这是你的画布。

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

您可以使用以下代码获取您的图像表示：

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

你可以通过更改图像来源，将其放置在普通的图像标记中。

<img id='myimage'/>

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

- lostsource

Answer 4

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

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

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

- Amogh Talpallikar

---

为了设置图像的src属性，您需要将ImageData转换为数据URL。因此，如果您有"image data"并想要设置src属性，这会让人感到困惑。如果您指的是"ImageData"，那么是错误的；而如果您指的是"data URL"，那么它并没有回答问题。 - pasx

Answer 5

简单的图像类实际上是HTMLImageElement，从ImageData创建它很麻烦。根据应用程序，我建议看看更抽象的CanvasImageSource，其中HTMLImageElement即Image()是其实现。例如，ImageBitmap可以直接从数据创建，而OffscreenCanvas可能是一个有用的东西。

- Nikita Zlobin