Blob constructor browser compatibility

Question

I am developping an application where I recieve image data stored in a uint8Array. I then transform this data to a Blob and then build the image url.

Simplified code to get data from server:

var array;  var req = new XMLHttpRequest(); var url = "img/" + uuid + "_" +segmentNumber+".jpg"; req.open("GET", url, true); req.responseType = "arraybuffer"; req.onload = function(oEvent) {     var data = req.response;         array = new Int8Array(data);       }; 

Constructor:

out = new Blob([data], {type : datatype} ); 

The Blob contsructor is causing problem. It works fine on all browsers except Chrome on mobile and desktop devices.

Use of Blob:

// Receive Uint8Array using AJAX here // array = ... // Create BLOB var jpeg = new Blob( [array.buffer], {type : "image/jpeg"}); var url = DOMURL.createObjectURL(jpeg); img.src = url; 

Desktop Chrome gives me a warnning : ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

Mobile Chrome gives me an error: illegal constructor

If I change the constructor to work on Chrome it fails on other browsers.

Answer 1

So, these are actually two different problems. The Desktop Chrome warning was a bug in chrome which is fixed since 2013-03-21.

Mobile Chrome is giving you a TypeError because the blob constructor is not supported. Instead you must use the old BlobBuilder API. The BlobBuilder API has browser specific BlobBuilder constructors. This is the case for FF6 - 12, Chrome 8-19, Mobile Chrome, IE10 and Android 3.0-4.2.

var array = new Int8Array([17, -45.3]);  try{   var jpeg = new Blob( [array], {type : "image/jpeg"}); } catch(e){     // TypeError old chrome and FF     window.BlobBuilder = window.BlobBuilder ||                           window.WebKitBlobBuilder ||                           window.MozBlobBuilder ||                           window.MSBlobBuilder;     if(e.name == 'TypeError' && window.BlobBuilder){         var bb = new BlobBuilder();         bb.append(array.buffer);         var jpeg = bb.getBlob("image/jpeg");     }     else if(e.name == "InvalidStateError"){         // InvalidStateError (tested on FF13 WinXP)         var jpeg = new Blob( [array.buffer], {type : "image/jpeg"});     }     else{         // We're screwed, blob constructor unsupported entirely        } } 

Fiddle: http://jsfiddle.net/Jz8U3/13/

Answer 2

Got it working with your code. I only had to change some little detail:

if(e.name == 'TypeError' && window.BlobBuilder){         var bb = new BlobBuilder();         bb.append(data);         out = bb.getBlob(datatype);         console.debug("case 2");     } 

bb.append(data); // data must be with no brackets

My function(constructor) that works now for all browsers:

var NewBlob = function(data, datatype) {     var out;      try {         out = new Blob([data], {type: datatype});         console.debug("case 1");     }     catch (e) {         window.BlobBuilder = window.BlobBuilder ||                 window.WebKitBlobBuilder ||                 window.MozBlobBuilder ||                 window.MSBlobBuilder;          if (e.name == 'TypeError' && window.BlobBuilder) {             var bb = new BlobBuilder();             bb.append(data);             out = bb.getBlob(datatype);             console.debug("case 2");         }         else if (e.name == "InvalidStateError") {             // InvalidStateError (tested on FF13 WinXP)             out = new Blob([data], {type: datatype});             console.debug("case 3");         }         else {             // We're screwed, blob constructor unsupported entirely                console.debug("Errore");         }     }     return out; }