Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

211
Views
Conversió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).

Cadena de datos binarios en la consola

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: 38e1bb48826eab759ab7220bc805124b
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!