Bouw geen klodders, maar construeer ze

Eric Bidelman

Een waarschuwing voor alle BlobBuilder- fans: het gaat tot ziens!

BlobBuilder is een handige API voor het maken van Blobs (of Bestanden) in JavaScript. Het bestaat al sinds Chrome 8, FF 6 en IE 10, maar is nooit in Safari geleverd en zal dat waarschijnlijk ook nooit doen. Recente specificatiewijzigingen in de File API omvatten een nieuwe constructor voor Blob , waardoor BlobBuilder in wezen irrelevant wordt. Sterker nog, Safari Nightlies hebben het al uitgeschakeld en Chrome zal je zeer binnenkort in de console gaan waarschuwen.

Ter vergelijking: hieronder vindt u dezelfde code met behulp van de verouderde BlobBuilder en de nieuwe Blob constructor. Het fragment creëert een stylesheet en voegt deze toe aan de DOM.

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

Handig! Dus in plaats van iets toe te voegen aan een BlobBuilder kunnen we nu eenvoudigweg de Blob maken op basis van een reeks gegevensdelen. De gegevensdelen kunnen van verschillende typen zijn ( DOMString , ArrayBuffer , Blob ) en in elke volgorde. Bijvoorbeeld:

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

Merk ook op dat de tweede objectparameter optioneel is. Zie de MDN-documentatie op Blob voor meer informatie over deze wijzigingen.