Как сгенерировать изображение из imageData в javascript?

Я хотел бы знать, есть ли способ создать новое изображение из imageData, которое ранее было получено из элемента canvas?

Я искал решение, но все они, кажется, рисуют результат на холсте. Поэтому в основном мне нужен способ прямого преобразования объекта ImageData в изображение, если это возможно.

Ответ 1

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

Ответ 2

Ни один из предыдущих ответов не дает ответа на вопрос, поскольку он был представлен в теме - получение изображения из 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;
}

Ответ 3

Предполагая, что это ваш холст

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

Вы можете получить представление своего изображения, используя

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

Затем вы можете поместить это в обычный тег изображения, изменив его источник

<img id='myimage'/>

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

Ответ 4

Многие современные браузеры поддерживают схему URI данных.

Если у вас есть данные изображения, вы можете установить атрибут src элемента img с помощью JavaScript.

Посмотрите на следующий пример: http://www.websiteoptimization.com/speed/tweak/inline-images/