0
129
ViewsConversión de la cadena de datos binarios del archivo de imagen a un Blob
Estoy tratando de convertir los datos recuperados de una API en un Blob para poder mostrarlos como una imagen en mi página.
En la respuesta, obtengo la cadena de datos que en la consola del navegador se ve como se muestra a continuación. Supongo que es solo un dato binario de un archivo (a mí me lo parece).
Uso este código para convertir la cadena en Blob :
const convertBinaryToBlob = (binary: string, contentType: string): Blob => { const uInt8Array = new Uint8Array(binary.length); for (let i = 0; i < binary.length; i++) { uInt8Array[i] = binary.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); }; Se genera bien, así como la URL del objeto Blob , por lo que puedo ponerlo como el src de una imagen. El problema es que el navegador no puede mostrar la imagen porque contiene algunos errores.
¿Cuál es el problema aquí? ¿Cómo puedo hacer que funcione?
Cuando lo pruebo usando curl , uso este comando:
curl -X 'GET' 'http://localhost:8000/images/file/6' -H 'accept: */*' --output img.png El archivo de salida funciona sin ningún problema. Encabezados de respuesta del curl :
HTTP/1.1 200 OK date: Tue, 25 Jan 2022 20:05:30 GMT server: uvicorn content-type: image/png content-length: 3099363 last-modified: Sun, 23 Jan 2022 18:12:08 GMT etag: 38e1bb48826eab759ab7220bc805124b1 answers
Answer question0
Un blob no es una fuente de imagen válida. Debe convertir los datos binarios a base64 para poder pasarlos como fuente de imagen.
Reemplace binaryString con sus datos binarios.
const encodeBase64 = (data) => { return Buffer.from(data).toString('base64'); } var base64EncodedStr = encodeBase64(decodeURI(encodeURIComponent(binaryString))); var src = "data:image/png;base64," + base64EncodedStr ;Establezca su fuente de imagen igual a la variable src.
También png podría ser otro formato de imagen.
Código compuesto a partir de esta publicación.