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
fuente
Respuestas:
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:
Mostrar una matriz de bytes como una imagen usando JavaScript
Mostrar bytes como imágenes en una página .aspx
'data: image / jpg; base64' y vista previa de la imagen jQuery en Internet Explorer
Convertir de datos binarios a un control de imagen en ASP.NET
¿Cómo convertir una matriz de bytes en una imagen?
fuente
[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,...])));