tablas - obtener datos de una tabla html javascript

¿Cómo generar una imagen de imageData en javascript?

Question

Me gustaría saber si hay alguna manera de crear una nueva Imagen de imageData, que se obtuvo previamente de un elemento de lienzo?

He buscado una solución, pero todos parecen estar dibujando el resultado en un lienzo. Así que, básicamente, necesito una forma de convertir un objeto ImageData a Image directamente, si es posible.

Answer 1

Asumiendo que este es tu lienzo

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

Puede obtener una representación de su imagen usando

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

Podrías poner eso en una etiqueta de imagen regular cambiando su fuente

<img id=''myimage''/>

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

Answer 2

Muchos navegadores modernos admiten el esquema de URI de datos.

Si tiene los datos de imagen, puede establecer el atributo src de un elemento img usando JavaScript.

Mire el siguiente ejemplo: http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 3

Ninguna de las respuestas anteriores proporciona una respuesta a la pregunta tal como se presentó en el tema, obteniendo una Imagen de ImageData. Entonces aquí hay una solución.

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 4

Puede usar el método toDataURL en Canvas. Hace una imagen de datos como URI de datos.

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

Si desea saber que el navegador del usuario es compatible con el esquema de URI de datos, puede usar esta función.

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