Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 208
shayward Avatar asked Feb 22 '13 18:02

shayward


People also ask

What is new Blob in JavaScript?

The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data. Blobs can represent data that isn't necessarily in a JavaScript-native format.

How to make Blob in JavaScript?

The syntax for creating a blob: In this syntax, Blobparts: It is an array of Blob, BufferSource, and string values. Options: It is an optional object. Type: It is a Blob type, generally MIME-type like image.

What is Blob web?

Web Browsers implement a Blob object, which is responsible for holding data. Blob means “Binary Large Object” and it's an opaque representation of a chunk of bytes. Blobs are used for many things. They can be created from content from the network. They can be saved to disk, or read from a disk.


2 Answers

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);
    }
}
like image 64
Rob W Avatar answered Sep 18 '22 07:09

Rob W


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.

like image 28
casey Avatar answered Sep 22 '22 07:09

casey