JavaScript Blob

Ein Blob (Kurzform für Binary Large Object) repräsentiert unveränderliche, rohe, dateiähnliche Daten. Er ist der Standardweg, um Blöcke binärer Inhalte im Browser weiterzugeben — Text, Bilder, Audio, PDFs, alles — ohne sie in einen JavaScript-nativen Typ wie string oder Array umwandeln zu müssen. Ein Blob ist opak: Er enthält Bytes sowie einen MIME-type, und du liest diese Bytes asynchron, wenn du sie benötigst.

Blobs stehen im Mittelpunkt der Dateiverarbeitung im Web. Ein File ist eigentlich ein spezialisierter Blob mit einem Namen und einem Änderungsdatum, fetch() kann dir einen Antwort-Body als Blob übergeben, und Canvas, Zwischenablage sowie der Download-Mechanismus sprechen alle Blob. Dieser Leitfaden erklärt, wie man Blobs erstellt, aufteilt, verlinkt, liest und konvertiert — samt den Fallstricken, über die man leicht stolpert.

Was ein Blob eigentlich ist

Ein Blob stellt zwei schreibgeschützte Eigenschaften und einige asynchrone Lesemethoden bereit:

• blob.size — die Länge der Daten in Bytes.
• blob.type — der MIME-Typ als string (leer "", wenn keiner angegeben wurde).
• blob.slice(start, end, type) — gibt einen neuen Blob für einen Byte-Bereich zurück, ohne die zugrunde liegenden Daten zu kopieren.
• blob.text(), blob.arrayBuffer(), blob.bytes(), blob.stream() — Promise-basierte (oder stream-basierte) Leser.

Da ein Blob unveränderlich ist, ändert keine dieser Methoden das Original — sie geben stets einen neuen Blob oder eine frische Leseoperation der Bytes zurück.

Blob-Objekte erstellen

Du erstellst einen Blob mit seinem Konstruktor, der zwei Argumente entgegennimmt: ein Array von Teilen und ein optionales Options-Objekt.

new Blob(parts, options);

Jedes Element in parts kann ein string, ein ArrayBuffer, ein TypedArray/DataView oder ein weiterer Blob sein — sie werden der Reihe nach zusammengefügt. Der string options.type ist der MIME-Typ, der den Verbrauchern mitteilt, wie die Bytes zu interpretieren sind (zum Beispiel "text/plain", "image/jpeg", "application/json" oder "audio/mpeg"). Eine vollständige Übersicht findest du unter MIME-Typen.

Blobs kombinieren und aufteilen

Da Blobs unveränderlich sind, „bearbeitest" du sie, indem du einen neuen Blob aus bestehenden Teilen aufbaust. Im parts-Array kannst du strings und Blobs frei mischen:

Um umgekehrt einen Byte-Bereich herauszulösen, verwende blob.slice(start, end). Es verhält sich wie Array.prototype.slice: end ist exklusiv, und negative Indizes zählen vom Ende.

Mit Blob-URLs arbeiten

Eine Blob-URL (auch Object-URL genannt) ist eine kurzlebige blob:-URL, die auf einen im Speicher gehaltenen Blob verweist. Du kannst sie überall einsetzen, wo eine URL erwartet wird — bei <img src>, einem <a href>-Download-Link oder einem <audio>-Element — damit der Browser den Blob wie eine entfernte Ressource lesen kann.

Blob-URLs generieren

URL.createObjectURL(blob) gibt bei jedem Aufruf eine eindeutige URL zurück:

Blob-URLs widerrufen

Jede Object-URL hält ihren Blob im Speicher, bis das Dokument entladen wird — auch nachdem das Element, das sie verwendet, längst entfernt wurde. Um Speicherlecks zu vermeiden, rufe URL.revokeObjectURL(url) auf, sobald du sie nicht mehr benötigst:

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

Einen Datei-Download auslösen

Ein häufiger Anwendungsfall ist es, dem Benutzer Daten herunterladen zu lassen, die das Skript generiert hat — ganz ohne Server-Roundtrip. Erstelle einen Blob, verpacke ihn in eine Object-URL, klicke einen temporären Link und widerrufe die URL danach:

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

Blob-Inhalte lesen

Die modernen, Promise-basierten Lesemethoden sind der einfachste Weg, Bytes aus einem Blob zu extrahieren:

Die ältere FileReader-API erledigt dasselbe mit Events statt Promises. Sie ist immer noch nützlich, wenn du Fortschrittsereignisse benötigst oder Legacy-Code unterstützen musst:

Für sehr große Blobs kannst du die Bytes mit blob.stream() streamen, anstatt alles auf einmal in den Speicher zu laden. blob.arrayBuffer() liefert dir einen rohen ArrayBuffer, wenn du Low-Level-Zugriff auf die Binärdaten benötigst.

Einen Blob in Base64 konvertieren

Base64 ermöglicht es, Binärdaten in rein textbasierten Kontexten wie JSON-Payloads oder Data-URLs einzubetten. FileReader.readAsDataURL() erzeugt eine data:-URL, deren Nutzlast Base64-kodiert ist:

Häufige Fallstricke

• Blobs sind unveränderlich. Es gibt keine Methode, um an einen Blob anzuhängen oder ihn zu überschreiben — baue einen neuen aus den gewünschten Teilen.
• Lesen ist immer asynchron. text(), arrayBuffer() und FileReader liefern ihre Ergebnisse zeitverzögert — verwende await oder .then(); die Bytes sind niemals synchron verfügbar.
• size zählt Bytes, keine Zeichen. Mehrbyte-UTF-8-Zeichen summieren sich: new Blob(["é"]).size ergibt 2, nicht 1.
• Widerrufe deine Object-URLs. Ein vergessener createObjectURL-Aufruf hält seinen Blob für die gesamte Lebensdauer der Seite im Speicher.
• type ist nur eine Bezeichnung. type: "image/png" zu setzen validiert nicht, dass die Bytes tatsächlich ein PNG sind; es bewirbt lediglich den beabsichtigten MIME-Typ.

Wo Blobs eingesetzt werden

• Datei-Uploads. Sende einen Blob (oder eine File) als Body eines fetch()-Requests, optional innerhalb von FormData.
• Generierte Downloads. Erstelle CSV, JSON oder Text spontan und übergib es dem Benutzer über eine Object-URL, wie oben gezeigt.
• Canvas und Bildbearbeitung. canvas.toBlob(callback, type) wandelt ein <canvas>-Element in einen Bild-Blob um, den du hochladen oder herunterladen kannst.
• Streaming großer Daten. Teile und streame große binäre Payloads, ohne alles auf einmal in den Speicher zu laden.

Fazit

Ein Blob ist der Container des Browsers für unveränderliche rohe Binärdaten: Erstelle ihn aus strings oder Buffern, teile ihn ohne Kopiervorgang auf, verlinke ihn über eine Object-URL und lese ihn mit text(), arrayBuffer() oder FileReader zurück. Denke daran: Blobs sind unveränderlich, Lesevorgänge sind asynchron, und Object-URLs müssen widerrufen werden. Mit diesen Regeln im Hinterkopf kannst du Dateien verschieben, Downloads generieren und Medien vollständig auf dem Client verarbeiten.

Um tiefer einzutauchen, erkunde die verwandte File- und FileReader-API sowie ArrayBuffer und Typed Arrays.

Übungen