El objeto Blob

Descubra qué es un Blob y cómo usarlo

Los navegadores web implementan un Blobobjeto, que es responsable de almacenar datos.

Blob significa “objeto binario grande” y es una representación opaca de un fragmento de bytes.

Los blobs se utilizan para muchas cosas.

Se pueden crear a partir de contenido de la red, se pueden guardar en un disco o leer desde un disco y son la estructura de datos subyacente que Filese utiliza en la FileReaderAPI, por ejemplo.

Se puede enviar un blob entre Web Workers y iFrames usando la API de mensajería de canal , y desde un servidor a un cliente usando la API Push .

También se puede hacer referencia a los blobs mediante URL.

Puede extraer texto (o bytes) almacenado en un blob, y los blobs incluso pueden almacenarse directamente en IndexedDB , y también pueden recuperarse desde allí.

Vea mi tutorial de IndexedDB

Los blobs son un tipo de datos fundamental para comprender.

Se puede crear un blob:

• usando el Blob()constructor
• de otro blob, utilizando el Blob.slice()método de instancia

El constructor toma una matriz de valores. Incluso si solo tiene una cadena para colocar en el blob, debe encapsularla en una matriz.

Ejemplo:

const data = new Blob(['Test'])

No es necesario que introduzcas un valor de cadena . Puedes pasar:

• una cadena
• unArrayBuffer
• unArrayBufferView
• otras manchas

El constructor Blob toma un segundo parámetro opcional, que representa el tipo MIME:

const data = new Blob(['Test'], { type: 'text/plain' })

Una vez que tengas un objeto Blob, puedes acceder a sus 2 propiedades:

• sizedevuelve la longitud en bytes del contenido del blob
• typeel tipo MIME asociado a él

y puedes llamar únicamente a sus métodos, slice().

Cuando llamas slice()puedes recuperar una parte del blob.

Este es un ejemplo de creación de un nuevo blob a partir de los bytes 10 a 20 de aBlob:

const partialBlob = aBlob.slice(10, 20)

Este código se utiliza como devolución de llamada a un tipo de entrada o arrastrar y soltar. Cargamos un blob en una URL mediante XHR y usamos una ffunción para realizar un seguimiento del progreso:

const uploadBlob = (url, blob, trackProgress) = {  const xhr = new XMLHttpRequest()  xhr.open('POST', url)  xhr.send(blob)  xhr.upload.onprogress = trackProgress}

Podemos descargar datos de Internet y almacenarlos en un objeto Blob usando esta sintaxis:

const downloadBlob = (url, callback) = {  const xhr = new XMLHttpRequest()  xhr.open('GET', url)  xhr.responseType = 'blob'  xhr.onload = () = {    callback(xhr.response)  }  xhr.send(null)}

Mencioné que también se puede hacer referencia a los blobs mediante URL.

Las URL de blobs las genera el navegador y son referencias internas. Dado un blob, puedes generar una URL para él usando la URL.createObjectURL()función.

Una URL de Blob comienza con el blob://esquema.

Una vez que el navegador ve esa URL, servirá el blob correspondiente almacenado en la memoria o en el disco.

Las URL de blobs son diferentes de las URL de datos (que comienzan con data:), porque no almacenan los datos en la URL. También son diferentes de las URL de archivos (que comienzan con file:), ya que no revelan información confidencial como la ruta del archivo.

Si accede a una URL de Blob que ya no existe, recibirá un error 404 del navegador.

Una vez que genere una URL de blob, puede eliminarla llamando URL.revokeObjectURL()y pasando la URL.

En este código de ejemplo tenemos un inputelemento para seleccionar una imagen. Una vez que se selecciona una imagen, eliminamos el elemento de entrada y mostramos la imagen. También borramos el blob una vez que terminamos de mostrar la imagen:

input type="file" allow="image/*" /

const input = document.querySelector('input')input.addEventListener('change', (e) = {  const img = document.createElement('img')  const imageBlob = URL.createObjectURL(input.files[0])  img.src = imageBlob  img.onload = function () {    URL.revokeObjectURL(imageBlob)  }  input.parentNode.replaceChild(img, input)})

No se puede acceder directamente a los datos contenidos en el blob.

Para poder hacer esto, debemos utilizar un objeto FileReader .

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase