JavaScript Blob

Un Blob (acronimo di Binary Large Object) rappresenta dati immutabili, grezzi, simili a file. È il modo standard per trasmettere porzioni di contenuto binario nel browser — testo, immagini, audio, PDF e qualsiasi altro formato — senza doverli convertire in un tipo nativo JavaScript come una string o un Array. Un Blob è opaco: contiene byte più un type MIME, e quei byte vengono letti in modo asincrono quando se ne ha bisogno.

I Blob sono al centro della gestione dei file sul web. Un File è in realtà un Blob specializzato con un nome e una data di modifica, fetch() può restituire il corpo di una risposta come Blob, e il canvas, gli appunti e il meccanismo di download parlano tutti il linguaggio dei Blob. Questa guida illustra come creare, dividere, collegare, leggere e convertire i Blob, oltre agli errori comuni in cui è facile incappare.

Cosa è realmente un Blob

Un Blob espone due proprietà in sola lettura e alcuni metodi di lettura asincrona:

• blob.size — la lunghezza dei dati in byte.
• blob.type — la string del tipo MIME (stringa vuota "" se non è stato fornito alcun tipo).
• blob.slice(start, end, type) — restituisce un nuovo Blob per un intervallo di byte, senza copiare i dati sottostanti.
• blob.text(), blob.arrayBuffer(), blob.bytes(), blob.stream() — lettori basati su promise (o su stream).

Poiché un Blob è immutabile, nessuno di questi metodi modifica l'originale — restituiscono sempre un nuovo Blob o una nuova lettura dei byte.

Creazione di oggetti Blob

Si crea un Blob con il suo costruttore, che accetta due argomenti: un array di parti e un oggetto opzioni facoltativo.

new Blob(parts, options);

Ogni elemento in parts può essere una string, un ArrayBuffer, un TypedArray/DataView o un altro Blob — vengono concatenati in ordine. La string options.type è il tipo MIME, che indica ai consumer come interpretare i byte (ad esempio "text/plain", "image/jpeg", "application/json" o "audio/mpeg"). Consulta i tipi MIME per un quadro completo.

Combinare e dividere i Blob

Poiché i Blob sono immutabili, li si "modifica" costruendo un nuovo Blob dalle parti esistenti. È possibile combinare liberamente string e Blob nell'array delle parti:

Per fare il contrario ed estrarre un intervallo di byte, si usa blob.slice(start, end). Rispecchia Array.prototype.slice: end è escluso e gli indici negativi contano dalla fine.

Lavorare con i Blob URL

Un Blob URL (chiamato anche object URL) è un URL blob: di breve durata che punta a un Blob mantenuto in memoria. È possibile inserirlo ovunque ci si aspetti un URL — un <img src>, un link di download <a href>, un elemento <audio> — in modo che il browser possa leggere il Blob come se fosse una risorsa remota.

Generare Blob URL

URL.createObjectURL(blob) restituisce un URL univoco ogni volta che viene chiamato:

Revocare i Blob URL

Ogni object URL mantiene il proprio Blob in memoria fino allo scaricamento del documento, anche dopo che l'elemento che lo utilizzava è stato rimosso. Per evitare perdite di memoria, chiama URL.revokeObjectURL(url) non appena hai finito di usarlo:

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

Avviare il download di un file

Un caso d'uso molto comune è permettere all'utente di scaricare dati generati dallo script, senza alcun round-trip al server. Crea un Blob, racchiudilo in un object URL, simula un clic su un link temporaneo e poi revoca:

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!");

Leggere il contenuto di un Blob

I lettori moderni basati su promise sono il modo più semplice per estrarre i byte da un Blob:

La vecchia API FileReader svolge lo stesso compito usando eventi invece di promise. È ancora utile quando si hanno bisogno di eventi di avanzamento o si deve supportare codice legacy:

Per Blob di grandi dimensioni è possibile trasmettere i byte in streaming con blob.stream() invece di caricare tutto in memoria in una volta, mentre blob.arrayBuffer() fornisce un ArrayBuffer grezzo quando serve accesso a basso livello ai dati binari.

Convertire un Blob in Base64

Base64 consente di incorporare dati binari in contesti che accettano solo testo, come payload JSON o data URL. FileReader.readAsDataURL() produce un URL data: il cui payload è codificato in Base64:

Errori comuni

• I Blob sono immutabili. Non esiste alcun metodo per aggiungere dati o riscrivere un Blob — occorre costruirne uno nuovo dalle parti desiderate.
• La lettura è sempre asincrona. text(), arrayBuffer() e FileReader restituiscono i risultati in modo differito, quindi occorre usare await o .then(); i byte non sono mai disponibili in modo sincrono.
• size conta i byte, non i caratteri. I caratteri UTF-8 multi-byte si sommano: new Blob(["é"]).size vale 2, non 1.
• Revoca i tuoi object URL. Un createObjectURL dimenticato mantiene il proprio Blob in memoria per tutta la durata della pagina.
• type è solo un'etichetta. Impostare type: "image/png" non valida che i byte siano effettivamente un PNG; dichiara soltanto il tipo MIME previsto.

Dove vengono usati i Blob

• Upload di file. Invia un Blob (o un File) come corpo di una richiesta fetch(), opzionalmente all'interno di FormData.
• Download generati. Costruisci CSV, JSON o testo al volo e consegnali all'utente tramite un object URL, come mostrato in precedenza.
• Lavoro con canvas e immagini. canvas.toBlob(callback, type) trasforma un <canvas> in un Blob immagine che puoi caricare o scaricare.
• Streaming di dati di grandi dimensioni. Dividi e trasmetti in streaming grandi payload binari senza caricare tutto in memoria in una sola volta.

Conclusione

Un Blob è il contenitore del browser per dati binari grezzi e immutabili: creane uno da string o buffer, dividilo senza copiarlo, collegalo tramite un object URL e rileggilo con text(), arrayBuffer() o FileReader. Ricorda che i Blob sono immutabili, le letture sono asincrone e gli object URL devono essere revocati. Con queste regole in mente puoi gestire file, generare download ed elaborare contenuti multimediali interamente sul client.

Per approfondire, esplora le API correlate File e FileReader e ArrayBuffer e typed array.

Esercizi