¿Cómo mostrar una imagen almacenada como matriz de bytes en HTML / JavaScript? [cerrado]

Estoy escribiendo una página web en HTML / JavaScript. Estoy descargando una imagen de mi backend usando AJAX. La imagen se representa como una matriz de bytes sin procesar, no una URL, por lo que no puedo usar el <img src="{url}">enfoque estándar .

¿Cómo le muestro la imagen mencionada al usuario?

javascript html

— cubuspl42
fuente

posible duplicado de Mostrar matriz de bytes como imagen usando JavaScript

— Suresh Atta

OutputStream o = resp.getOutputStream (); o.write (imageInBytes);

Tengo miedo de preguntar, pero la curiosidad gana ... ¿Por qué esto se sale de tema?

— cubuspl42

No creo que este problema esté fuera de tema.

— metasoarous

136

Intente poner este fragmento de HTML en su documento publicado:

<img id="ItemPreview" src="">

Luego, en el lado de JavaScript, puede modificar dinámicamente el srcatributo de la imagen con la llamada URL de datos .

document.getElementById("ItemPreview").src = "data:image/png;base64," + yourByteArrayAsBase64;

Alternativamente, usando jQuery:

$('#ItemPreview').attr('src', `data:image/png;base64,${yourByteArrayAsBase64}`);

Esto supone que su imagen está almacenada en formato PNG, que es bastante popular. Si utiliza algún otro formato de imagen (por ejemplo, JPEG), modifique el tipo ( "image/..."parte) MIME en la URL en consecuencia.

Preguntas similares:

— Sridhar R
fuente

Mi Byte = dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck. src = datos: imagen / png; base64, dwr / download / k1a3JvBCfU3vLji $ zKkhQObxzck.

Descarga de imagen en formato Byte.

— Diamond King

Tarde para la fiesta, pero si su respuesta se parece [137,80,78,71,13,10,26,10,0,...], puede usar esta línea:

document.getElementById("ItemPreview").src = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, new Uint8Array([137,80,78,71,13,10,26,10,0,...])));

— Joel'- '31 de

Edité un poco la respuesta para que quede más clara, pero no obtengo nada, así que no lo solucioné. ¿Por qué esta respuesta asume que la imagen está almacenada en una cadena base64? El OP mencionó (y verifiqué el historial de edición) una "matriz de bytes", no una "cadena base64".

— cubuspl42

@ Joel'- 'Eso me funcionó, gracias

— Mohammad Hossein Ganjyar