Cómo mostrar en web la imagen almacenada en un blob

Actualizado: 2020/07/03

Cuando se quiere guardar la imagen asociada a un registro, aparecen dos alternativas:

• Subir la imagen a un directorio público y guardar en el registro su url
• Guardar la imagen en una base de datos. Esto se consigue convirtiendo el binario en un texto hexadecimal (base64).

Cada una tiene sus pros y sus contras. Personalmente yo siempre prefiero la primera, pero quizás haya ocasiones donde sea preferible la segunda.

Como sea, supongamos que estamos ante una base de datos SQL Server con registros que contienen las imágenes que queremos mostrar.

Un query a esa base de datos devolverá algo como:

<Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 01 00 48 00 48 00 00 ff fe 00  ... >

O, equivalentemente:

{ "type": "Buffer", "data": [ 255, 216, 255, 224,...] }

Entonces, cómo se llega a mostrarla en web?

Si la data está como string

// Tener una imagen

var myImage = document.querySelector("#my-image");

// Tener la data

var data = 'FFD8FFE000104A46494600...';

// Convertir el string a bytes

var bytes = new Uint8Array(data.length / 2);

for (var i = 0; i < data.length; i += 2) {
    bytes[i / 2] = parseInt(data.substring(i, i + 2), /* base = */ 16);
}

// Convertir los bytes a un blob

var myBlob = new Blob([bytes], { type: "image/jpg" });

// Obtener el url

var url = URL.createObjectURL(myBlob);

// Actualizar el url de la imagen

myImage.src = url;

Si la data está como string (más simple)

// Tener una imagen

var myImage = document.querySelector("#my-image");

// Tener la data

var data = 'FFD8FFE000104A46494600...';

// Obtener el url

var url = "data:image/png;base64," + data;

// Actualizar el url de la imagen

myImage.src = url;

Si la data ya está como array numérico

// Tener una imagen

var myImage = document.querySelector("#my-image");

// Tener la data

var data = [255, 216, 255, 224, ...];

// Convertir la data a bytes

var bytes = new Uint8Array(data);

// Convertir los bytes a un blob

var myBlob = new Blob([bytes], { type: "image/jpg" });

// Obtener el url

var url = URL.createObjectURL(myBlob);

// Actualizar el url de la imagen

myImage.src = url;

Conclusión

• Para tener el url de la imagen necesitamos un Blob creado con javascript
• Para tener ese blob necesitamos un Uint8Array (array de bytes) que contenga nuestra data
• Si nuestra data es un string, primero hay que transformarlas a un array de bytes
• Si nuestra data es un array numérico, también hay que transformarlas a un array de bytes, pero se hace automáticamente con el constructor de Uint8Array.