El Objeto Blob en JS

La manipulación de binarios en JavaScript es uno de los temas que personalmente más me ha costado entender y sobre todo encontrar información, si ese es tu caso, te invito a leer este post.

Binary Large Object (BLOB)

Alguna vez te ha pasado que intentas utilizar un string de base64 para mostrar una imagen en un elemento img, y te das cuenta que no funciona porque el navegador no puede interpretar el string, y te preguntas ¿cómo puedo mostrar una imagen en un elemento img? \

BLOB es un objeto de JS que el novegador soporta y es útil para la manipulación de archivos binarios, es decir, un archivo que no es de texto plano. Estos sería las imágenes, videos, audios, etc.
El uso del obejeto blob radica principalmente en poder leer y escribir archivos en el navegador, por ejemplo si queremos crear un archivo de texto plano, podemos hacerlo de la siguiente manera:

    
const blob = new Blob(['Hello, world!'], {type: 'text/plain'});
console.log(blob); // Blob {size: 13, type: "text/plain"}
  

Genial! ahora tenemos un objeto blob, pero ¿cómo podemos leerlo?

    
const reader = new FileReader();
reader.addEventListener('loadend', (e) => {
    const text = e.currentTarget.result;
    console.log(text); // Hello, world!
});
reader.readAsText(blob);
  

En el código anterior estamos haciendo una petición a una url la cual está sirviendo una imágen, y así como existe el método .json() para leer un archivo JSON, existe el método .blob() para leer un archivo binario.
Ahora podemos utilizar el objeto URL.createObjectURL() para poder generar un link que apunte a nuestro archivo binario, y así poder utilizarlo en un elemento img, video, etc.

    
const url = URL.createObjectURL(blob);
console.log(url); // blob:http://tuURL.com
  

Tengamos en cuenta que la url que se genera es temporal, pero podemos generar una nueva cuando queramos consumir el binario.
Esto es muy útil cuando queremos mostrar un binario pesado como lo son los videos y audios, ya que para cuando tengamos la url del archivo, el navegador ya habrá descargado el archivo y lo tendrá en cache, por lo que al momento de reproducirlo no tendremos que esperar a que se descargue.