Mozilla's getting a new look. What do you think? http://www.surveygizmo.com/s3/3076876/Mozilla-Brand-Identity-Survey-MDN

Blob

Dieser Artikel benötigt eine technische Überprüfung. So können Sie helfen.

Dieser Artikel benötigt eine redaktionelle Überprüfung. So können Sie helfen.

Ü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 der Firefox 30 eingestellt.

Konstruktor

Blob()
Gibt einen neuen Blob zurück, dessen Inhalt das als Parameter übergebene Array in zusammen gesetzter 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 erlaubt, 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, diese ist mittlerweile allerdings veraltet und sollte nicht mehr genutzt werden.

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

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 enthielt, war in WebKit und Opera 11.10 implementiert. Da sich jedoch diese Syntax von Array.slice() und String.slice() unterschied, wurde diese 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 enthielt, 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 mit 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 dsa verhalten von slice() beinflusste. Bei Start- und Endpotisionen außerhalb von vorzeichenbehafteten 64bit Werten funktionierte die Methode nicht, dieser Bug wurde mitlerweile behoben und vorzeichenlose 64bit Werte sind nun möglich.

Chrome Code - Scope

Um es im Chrome Code, JSM und Bootstrap Scope zu ververden muss es folgendermaßen importiert werden:

Cu.importGlobalProperties(['Blob']);

Blobs sind auch in Worker-Scopes verfügbar.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: HendrikRunte, manni66, omniskop, fscholz
 Zuletzt aktualisiert von: HendrikRunte,