Blob

Ü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.

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'});

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

Browser-Kompatibilität

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.

Siehe auch

• BlobBuilder
• File
• URL.createObjectURL
• Components.utils.importGlobalProperties