Ü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
Blobzurück, dessen Inhalt das als Parameter übergebene Array in zusammengesetzter Form ist.
Eigenschaften
Blob.isClosedRead only- Gibt einen booleschen Wert zurück, der anzeigt, ob die
Blob.close()-Methode zu diesemBlobbereits aufgerufen wurde. Geschlossene Blobs können nicht mehr ausgelesen werden. Blob.sizeRead only- Gibt die Größe des
Blob-Inhalts in Bytes zurück. Blob.typeRead 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-Objektzurü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
| 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.