JavaScript Blob

Un Blob (abreviatura de Binary Large Object, u Objeto Binario Grande) representa datos inmutables de tipo archivo en formato sin procesar. Es la forma estándar de transmitir fragmentos de contenido binario en el navegador — texto, imágenes, audio, PDFs, cualquier cosa — sin obligar a convertirlos a un tipo nativo de JavaScript como un string o un Array. Un Blob es opaco: contiene bytes más un type MIME, y se leen esos bytes de forma asíncrona cuando se necesitan.

Los Blobs son el centro del manejo de archivos en la web. Un File es en realidad un Blob especializado con nombre y fecha de modificación, fetch() puede entregarle el cuerpo de una respuesta como Blob, y el canvas, el portapapeles y el mecanismo de descarga trabajan todos con Blob. Esta guía explica cómo crear, dividir, enlazar, leer y convertir Blobs, además de los errores comunes en los que suele caer la gente.

Qué es realmente un Blob

Un Blob expone dos propiedades de solo lectura y varios métodos de lectura asíncronos:

• blob.size — la longitud de los datos en bytes.
• blob.type — el string de tipo MIME (vacío "" si no se proporcionó ninguno).
• blob.slice(start, end, type) — devuelve un nuevo Blob para un rango de bytes, sin copiar los datos subyacentes.
• blob.text(), blob.arrayBuffer(), blob.bytes(), blob.stream() — lectores basados en promesas (o en streams).

Dado que un Blob es inmutable, ninguno de estos métodos modifica el original — siempre devuelven un nuevo Blob o una nueva lectura de los bytes.

Crear objetos Blob

Se crea un Blob con su constructor, que acepta dos argumentos: un array de partes y un objeto de opciones opcional.

new Blob(parts, options);

Cada elemento de parts puede ser un string, un ArrayBuffer, un TypedArray/DataView u otro Blob — se concatenan en orden. El string options.type es el tipo MIME, que indica a los consumidores cómo interpretar los bytes (por ejemplo "text/plain", "image/jpeg", "application/json" o "audio/mpeg"). Consulta tipos MIME para ver el panorama completo.

Combinar y dividir Blobs

Dado que los Blobs son inmutables, se "editan" construyendo un nuevo Blob a partir de partes existentes. Puedes mezclar strings y Blobs libremente en el array de partes:

Para hacer lo contrario y extraer un rango de bytes, usa blob.slice(start, end). Funciona igual que Array.prototype.slice: end es exclusivo, y los índices negativos cuentan desde el final.

Trabajar con URLs de Blob

Una URL de Blob (también llamada URL de objeto) es una URL blob: de corta duración que apunta a un Blob almacenado en memoria. Puedes usarla en cualquier lugar que espere una URL — un <img src>, un enlace de descarga <a href>, un elemento <audio> — para que el navegador pueda leer el Blob como si fuera un recurso remoto.

Generar URLs de Blob

URL.createObjectURL(blob) devuelve una URL única cada vez que se llama:

Revocar URLs de Blob

Cada URL de objeto mantiene su Blob en memoria hasta que el documento se descarga, incluso después de que el elemento que la usa desaparezca. Para evitar fugas de memoria, llama a URL.revokeObjectURL(url) cuando hayas terminado:

const data = new Blob(["Example text"], { type: "text/plain" });
const blobUrl = URL.createObjectURL(data);

// ...use blobUrl, e.g. as an <a href> or <img src> ...

URL.revokeObjectURL(blobUrl); // frees the memory held by the Blob URL

Activar una descarga de archivo

Un uso común en el mundo real es permitir que el usuario descargue datos generados por tu script, sin ninguna ida y vuelta al servidor. Crea un Blob, envuélvelo en una URL de objeto, haz clic en un enlace temporal y luego revócalo:

function downloadText(filename, text) {
  const blob = new Blob([text], { type: "text/plain" });
  const url = URL.createObjectURL(blob);

  const a = document.createElement("a");
  a.href = url;
  a.download = filename; // suggested file name
  a.click();

  URL.revokeObjectURL(url); // clean up immediately after the click
}

downloadText("notes.txt", "Saved from the browser!");

Leer contenido de un Blob

Los lectores modernos basados en promesas son la forma más sencilla de obtener bytes de un Blob:

La API más antigua FileReader realiza la misma función mediante eventos en lugar de promesas. Sigue siendo útil cuando necesitas eventos de progreso o debes soportar código heredado:

Para Blobs muy grandes puedes transmitir los bytes con blob.stream() en lugar de cargar todo en memoria de una vez, y blob.arrayBuffer() te da un ArrayBuffer sin procesar cuando necesitas acceso de bajo nivel a los datos binarios.

Convertir un Blob a Base64

Base64 permite incrustar datos binarios en contextos que solo aceptan texto, como cargas útiles JSON o URLs de datos. FileReader.readAsDataURL() produce una URL data: cuya carga útil está codificada en Base64:

Errores comunes

• Los Blobs son inmutables. No existe ningún método para añadir o reescribir un Blob — construye uno nuevo a partir de las partes que desees.
• La lectura siempre es asíncrona. text(), arrayBuffer() y FileReader devuelven sus resultados de forma diferida, así que usa await o .then(); los bytes nunca están disponibles de manera síncrona.
• size cuenta bytes, no caracteres. Los caracteres UTF-8 multibyte se acumulan: new Blob(["é"]).size es 2, no 1.
• Revoca tus URLs de objeto. Un createObjectURL olvidado mantiene su Blob en memoria durante toda la vida de la página.
• type es solo una etiqueta. Establecer type: "image/png" no valida que los bytes sean un PNG; solo anuncia el tipo MIME previsto.

Dónde se usan los Blobs

• Subida de archivos. Envía un Blob (o un File) como cuerpo de una solicitud fetch(), opcionalmente dentro de FormData.
• Descargas generadas. Construye CSV, JSON o texto sobre la marcha y entrégaselo al usuario mediante una URL de objeto, como se muestra arriba.
• Trabajo con canvas e imágenes. canvas.toBlob(callback, type) convierte un <canvas> en un Blob de imagen que puedes subir o descargar.
• Transmisión de datos grandes. Divide y transmite grandes cargas útiles binarias sin cargar todo en memoria de una vez.

Conclusión

Un Blob es el contenedor del navegador para datos binarios sin procesar e inmutables: créalo a partir de strings o buffers, divídelo sin copiarlo, enlázalo mediante una URL de objeto y léelo de nuevo con text(), arrayBuffer() o FileReader. Recuerda que los Blobs son inmutables, las lecturas son asíncronas y las URLs de objeto deben revocarse. Con esas reglas en mente puedes mover archivos, generar descargas y procesar medios completamente en el cliente.

Para profundizar, explora la API relacionada File y FileReader y ArrayBuffer y arrays tipados.

Práctica