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

Question

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.

Rob W · Accepted Answer · 2013-02-22 22:27:03Z

17

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

edited Feb 22, 2013 at 22:27

answered Feb 22, 2013 at 18:41

Rob W

350k87 gold badges811 silver badges683 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

shayward Over a year ago

In the update of my post, I tried your code and received 'Uncaught TypeError: undefined is not a function'

Rob W Over a year ago

@shayward Use the code in my answer without any modifications: Take your original function, and replace the last lines (var BlobBuilder ...... }) with my code.

shayward Over a year ago

Thanks works, just an error after type: mimeString. Missing closing bracket. But for the future will this be removed as well?

Rob W Over a year ago

@shayward The Blob constructor is defined in the latest version of the specification. So, unless the spec changes again, you'll be safe. For compatibility, see caniuse.com/blobbuilder.

casey · Accepted Answer · 2013-05-14 15:11:43Z

4

Blob = (function() {
  var nativeBlob = Blob;

  // Add unprefixed slice() method.
  if (Blob.prototype.webkitSlice) {
    Blob.prototype.slice = Blob.prototype.webkitSlice;  
  }
  else if (Blob.prototype.mozSlice) {
    Blob.prototype.slice = Blob.prototype.mozSlice;  
  }

  // Temporarily replace Blob() constructor with one that checks support.
  return function(parts, properties) {
    try {
      // Restore native Blob() constructor, so this check is only evaluated once.
      Blob = nativeBlob;
      return new Blob(parts || [], properties || {});
    }
    catch (e) {
      // If construction fails provide one that uses BlobBuilder.
      Blob = function (parts, properties) {
        var bb = new (WebKitBlobBuilder || MozBlobBuilder), i;
        for (i in parts) {
          bb.append(parts[i]);
        }
        return bb.getBlob(properties && properties.type ? properties.type : undefined);
      };
    }        
  };
}());

Include this before you are going to use Blobs and you'll be able to use Blob constructors in browsers that only support the deprecated BlobBuilder.

edited May 14, 2013 at 15:11

answered May 14, 2013 at 14:07

casey

413 bronze badges

3 Comments

Thomas Over a year ago

It might be helpful to put a few more comments in this to make it clear what each part is doing.

Thomas Over a year ago

Yea, that will make it more helpful to others in the future.

Daniele Muscetta Over a year ago

Yup, it doesn't work on webOS either - can't find WebKitBlobBuilder nor the other var...

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related