Crear imagen HTML a partir de datos en la variable Javascript

Question

Tengo datos de imagen (ya sea JPEG o PNG) en una variable de Javascript. ¿Cómo se muestra la imagen en un documento HTML? Estas son imágenes muy grandes y código como este no funciona debido a que el URI es demasiado largo:

// doesn't work because the URI is too long 
$('img#target').attr('src', 'data:...'); 

Usando lienzo es probablemente la respuesta, pero no puedo encontrar la manera de cargar con los datos de la imagen.

En caso de que se pregunte: no, no puedo simplemente descargar los datos de la imagen directamente a la etiqueta img. Vino del servidor encriptado y fue descifrado dentro del navegador usando Javascript.

Gracias,
- Arte Z.

Answer 1

utilizar una dirección URL de datos para dibujar en un lienzo:

var img = new Image; 
img.onload = function(){ 
    myCanvasContext.drawImage(img,0,0); 
}; 
img.src = "data:..."; 

por this question/answer asegúrese de que establece el onload antes de la src.

Usted dice que "el URI es demasiado largo", pero no está claro lo que quiere decir con esto. Solo IE8 tiene un límite de 32kB en el URI de datos; para otros navegadores debería funcionar bien. Si está experimentando un error, por favor descríbalo.

Answer 2

Resulta que

$('img#target').attr('src', 'data:...'); 

funciona en todos excepto IE. Mi problema se originó en otro lado.