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.
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.
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.
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.
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);
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With