Erstellen Sie keine Blobs, sondern erstellen Sie sie.

Eric Bidelman

Hier ist eine Mitteilung an alle BlobBuilder-Fans. Bis bald!

BlobBuilder ist eine praktische API zum Erstellen von Blobs (oder Dateien) in JavaScript. Es gibt es seit Chrome 8, FF 6 und IE 10, wurde aber noch nie in Safari ausgeliefert und wird es wahrscheinlich auch nie geben. Kürzliche Spezifikationsänderungen an der File API beinhalten einen neuen Konstruktor für Blob, was BlobBuilder im Wesentlichen irrelevant macht. In der Nacht wurde die Funktion von Safari bereits deaktiviert und Chrome wird Sie in Kürze in der Konsole warnen.

Zum Vergleich: Unten sehen Sie den gleichen Code mit dem verworfenen BlobBuilder und dem neuen Blob-Konstruktor. Mit dem Snippet wird ein Stylesheet erstellt und an das DOM angehängt.

BlobBuilder():

window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder ||
                        window.MozBlobBuilder || window.MSBlobBuilder;
window.URL = window.URL || window.webkitURL;

var bb = new BlobBuilder();
bb.append('body { color: red; }');
var blob = bb.getBlob('text/css');

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);

document.body.appendChild(link);

Blob():

window.URL = window.URL || window.webkitURL;

var blob = new Blob(['body { color: red; }'], {type: 'text/css'});

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);

Praktisch! Anstatt ein BlobBuilder-Element anzuhängen, können wir nun den Blob-Wert einfach aus einem Array von Datenteilen erstellen. Die Datenteile können verschiedene Typen (DOMString, ArrayBuffer, Blob) und in beliebiger Reihenfolge haben. Beispiel:

var blob = new Blob(['1234567890', blob, arrayBuffer]);

Beachten Sie auch, dass der zweite Objektparameter optional ist. Weitere Informationen zu diesen Änderungen finden Sie in der MDN-Dokumentation zu Blob.