How to replace the deprecated BlobBuilder with the new Blob constructor?

blobs, javascript

Solution

Switching from `BlobBuilder` to `Blob` is quite straightforward. Try the following backwards-compatible code (the stuff in the `catch` block is your original code):

...
    try {
        return new Blob([ab], {type: mimeString});
    } catch (e) {
        // The BlobBuilder API has been deprecated in favour of Blob, but older
        // browsers don't know about the Blob constructor
        // IE10 also supports BlobBuilder, but since the `Blob` constructor
        //  also works, there's no need to add `MSBlobBuilder`.
        var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder;
        var bb = new BlobBuilder();
        bb.append(ab);
        return bb.getBlob(mimeString);
    }
}

Problem

Since Blobbuilder is deprecated and I have recently decided to use a new facial recognition API I am having a hard time switching over to just "blob". ``` function dataURItoBlob(dataURI, callback) { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs var byteString; if (dataURI.split(',')[0].indexOf('base64') >= 0) { byteString = atob(dataURI.split(',')[1]); } else { byteString = unescape(dataURI.split(',')[1]); } // separate out the mime component var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // write the bytes of the string to an ArrayBuffer var ab = new ArrayBuffer(byteString.length); var ia = new Uint8Array(ab); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } // write the ArrayBuffer to a blob, and you're done var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder; var bb = new BlobBuilder(); bb.append(ab); return bb.getBlob(mimeString); } ``` I tried switching it over to just: ``` // write the ArrayBuffer to a blob, and you're done var Blob = window.URL || window.webkitURL; var bb = new Blob(); /*var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = window.URL.createObjectURL(blob); document.body.appendChild(link);*/ /*var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder; var bb = new BlobBuilder(); bb.append(ab);*/ return bb.getBlob(mimeString); } ``` But i keep getting `Uncaught TypeError: Object #<URL> has no method 'getBlob'` in the console. Not sure what I am missing. If i try to use `bb.append(ab);` I get `Uncaught TypeError: Object #<Blob> has no method 'append'` in the console.

Original source