0
479
VisualizaçõesJavascript: ¿almacenar y mostrar temporalmente la imagen recibida del backend como datos binarios?
Actualmente estoy tratando de mostrar una imagen, que recibo de un servidor back-end en una forma/formato particular, en la pantalla del navegador.
Mi problema está estrechamente relacionado con este problema, para el cual no existe una respuesta real.
Aquí hay una captura de pantalla que muestra cómo se ve la respuesta del servidor backend:
payload.data contiene los datos de la imagen, que es una nube verde (también adjunto al final de esta publicación como referencia).
Mi primera pregunta, probablemente muy estúpida, sería: ¿Qué tipo de formato/codificación es esa?
De todos modos, esto es lo que luego traté de procesar los datos:
const blob = new Blob([action.payload.data], { //contains the data type: action.payload.headers["content-type"] // 'image/png' }) console.log("blob: ", blob); const url = URL.createObjectURL(blob); console.log("url : ", url)Como resultado, el blob se crea correctamente, así como la URL. Sin embargo, cuando abro ese enlace, no se muestra ninguna imagen.
Estoy atascado aquí y agradecería cualquier tipo de pista útil que señale dónde estoy cometiendo un error aquí.
Muchas gracias por su apoyo de antemano.
PD: Como prometí, aquí está la imagen png real: 
1 Respostas
Responde à pergunta0
Parece que su atributo data todavía está en formato binario. Debe convertir el hexadecimal en base64 para mostrar la imagen. En primer lugar, si el servidor del que obtiene el formulario de imagen es suyo, recomendaría codificar la imagen en el servidor antes de enviarla al cliente. Si el servidor no es suyo y no puede cambiar los datos que se devuelven, intente algo como esto:
function hexToBase64(str) { return btoa(String.fromCharCode.apply(null, str.replace(/\r|\n/g, "").replace(/([\da-fA-F]{2}) ?/g, "0x$1 ").replace(/ +$/, "").split(" "))); }Y luego utilízalo así:
const img = document.createElement('img'); img.src = 'data:image/jpeg;base64,' + hexToBase64('your-binary-data'); document.body.appendChild(img);referencia: Cómo mostrar datos binarios como imagen - extjs 4