Blob - Web API Referenz

Übersicht

Ein Blob ist eine dateiähnliche Menge unveränderlicher Roh-Daten, die nicht notwendigerweise native JavaScript-Daten enthalten. Das File-Interface basiert auf Blob und erweitert dessen Funktionen und die Unterstützung von Dateien auf dem System des Nutzers.

Eine einfache Methode, um einen Blob zu erstellen, ist der Aufruf des Blob()-Konstruktors. Anders ist es auch mit Hilfe eines Aufrufs von slice() möglich, einen Ausschnitt aus einem anderen Blob zu erhalten.

Die APIs, welche Blob-Objekte akzeptieren, werden ebenfalls in der File-Dokumentation genannt.

Note: The slice() method had initially taken length as the second argument to indicate the number of bytes to copy into the new Blob. If you specified values such that start + lengthexceeded the size of the source Blob, the returned Blob contained data from the start index to the end of the source Blob.

Zu beachten: Der slice()-Methode kann in manchen Browsern (und Versionen) ein Vendor-Präfix vorangestellt sein. Firefox 12 und früher: blob.mozSlice(). Safari: blob.webkitSlice(). Eine alte Version von slice() ohne Vendor-Präfix ist überholt. Die Unterstützung von blob.mozSlice() wurde mit Firefox 30 eingestellt.

Konstruktor

Blob(): Gibt einen neuen Blob zurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.

Eigenschaften

Blob.isClosed Read only: Gibt einen booleschen Wert zurück, der anzeigt, ob die Blob.close()-Methode zu diesem Blob bereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden.
Blob.size Read only: Gibt die Größe des Blob-Inhalts in Bytes zurück.
Blob.type Read only: Ein String, der den MIME-Typ enthält. Ist der Typ unbekannt, ist der Rückgabe-String leer.

Methoden

Blob.close(): Schließt das Blob-Objekt und gibt gegebenenfalls reservierte Ressourcen frei.
Blob.slice([start[, end[, contentType]]]): Gibt ein neues Blob-Objekt zurück, das die spezifierte Menge an Daten enthält.

Beispiele:

Beispielanwendung des Blob-Konstruktors

Der Blob() constructor ermöglicht es, Blobs aus Objekten zu erzeugen. Beispielsweise kann man einen Blob von einem String-Objekt erzeugen:

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

BlobBuilder bietet noch eine weitere Möglichkeit Blobs zu erstellen, welche mittlerweile allerdings veraltet ist und nicht mehr genutzt werden sollte.

var builder = new BlobBuilder();
var fileParts = ['<a id="a"><b id="b">hey!</b></a>'];
builder.append(fileParts[0]);
var myBlob = builder.getBlob('text/xml');

Erstellen einer URL für ein "typed array" durch einen Blob

Beispiel-Code:

var typedArray = EinTypedArrayErstellen();
var blob = new Blob([typedArray], {type: 'application/octet-binary'}); // ein gültiger MIME-Typ
var url = URL.createObjectURL(blob);
// Die URL wird etwa so sein: blob:d3958f5c-0777-0845-9dcf-2cb28783acaf
// Nun kann die URL überall genutzt werden, wo URLs verwendung finden, z.B. in Bildquellen (image.src)

Daten aus einem Blob lesen

Um Daten aus einem Blob zu lesen, muss ein FileReader genutzt werden. Der folgende Code liest den Inhalt eines Blobs als ein typisiertes Array aus.

var reader = new FileReader();
reader.addEventListener("loadend", function() {
   // reader.result beinhaltet den Inhalt des Blobs
});
reader.readAsArrayBuffer(blob);

Über eine andere Methode von FileReader ist es möglich, den Inhalt eines Blobs als String oder Data-URL zu lesen.

Spezifikationen

Spezifikation	Status	Hinweis
File API Die Definition von 'Blob' in dieser Spezifikation.	Arbeitsentwurf	Grundlegende Definition

Browser-Kompatibilität

Wir konvertieren die Kompatibilitätsdaten in ein maschinenlesbares JSON Format. Diese Kompatibilitätstabelle liegt noch im alten Format vor, denn die darin enthaltenen Daten wurden noch nicht konvertiert. Finde heraus wie du helfen kannst!

Desktop
Mobile

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	5[1]	4[2]	10	11.10[1]	5.1[1]
`slice()`	10 webkit 21	5 moz[3] 13	10	12	5.1 webkit
`Blob()`constructor	20	13.0 (13.0)	10	12.10	6
`close()`and `isClosed`	?	Nicht unterstützt[4]	?	?	?

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	?	13.0 (13.0)	?	?	?
`slice()`	?	?	?	?	?
`Blob()`constructor	?	?	?	?	?
`close()`and `isClosed`	?	Nicht unterstützt[4]	?	?	?

Anmerkung zur slice()-Implementierung

[1] Eine Version von slice(), die als zweites Argument die gewünschte Größe enthält, war in WebKit und Opera 11.10 implementiert. Da sich jedoch diese Syntax von Array.slice() und String.slice() unterschied, wurde die Unterstützung in WebKit fallen gelassen zu Gunsten der neuen Syntax von Blob.webkitSlice().

[2] Eine Variante von slice(), die als zweites Argument die gewünschte Größe enthält, war in Firefox 4 verfügbar. Da sich jedoch diese Syntax von Array.slice() und String.slice() unterschied, wurde diese Unterstützung in Gecko fallen gelassen zu Gunsten der neuen Syntax von mozSlice().

[3] Vor Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) trat ein Fehler im Verhalten von slice() auf; die erste und letzte Position außerhalb des Bereichs von 64-Bit-Werten wurden fehlerhaft verarbeitet, was nun für vorzeichenlose 64-Bit-Werte behoben wurde.

[4] Siehe Bug 1048325

Anmerkungen zu Gecko

Vor Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9) gab es einen Bug, der das Verhalten von slice() beinflusste. Bei Start- und Endpositionen außerhalb von vorzeichenbehafteten 64-Bit-Werten funktionierte die Methode nicht. Dieser Bug wurde mittlerweile behoben und vorzeichenlose 64-Bit-Werte sind nun möglich.

Chrome Code - Scope

Um Blobs im Chrome Code, JSM und Bootstrap Scope zu verwenden, müssen sie folgendermaßen importiert werden:

Cu.importGlobalProperties(['Blob']);

Blobs sind auch in Worker-Scopes verfügbar.