Blob構造函數瀏覽器兼容性

Question

我正在開發一個應用程序，我接收存儲在uint8Array中的圖像數據。 然後，我將這些數據轉換爲Blob，然後構建圖像url。

簡化代碼從服務器獲取數據：

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

構造：

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

團塊contsructor導致的問題。在移動設備和桌面設備上的Chrome瀏覽器之外的所有瀏覽器上都能正常工作

使用的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; 

桌面版Chrome給了我一個WARNNING：ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

的移動版Chrome給了我一個錯誤：illegal constructor

如果我改變構造函數工作在Chrome上，它在其他瀏覽器上失敗。

Answer 1

得到它與您的代碼工作。我只需要改變一些小細節：

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

bb.append（數據）; //數據必須是不帶括號

我的函數（構造函數），現在適用於所有的瀏覽器：

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

Answer 2

所以，這些實際上是兩個不同的問題。桌面Chrome瀏覽器警告是自2013年3月21日起固定的Chrome中的bug。

由於不支持Blob構造函數，因此Mobile Chrome會爲您提供TypeError。相反，您必須使用舊的BlobBuilder API。 BlobBuilder API有browser specific BlobBuilder構造函數。 FF6-12，Chrome 8-19，Mobile Chrome，IE10和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 
    } 
} 

小提琴：http://jsfiddle.net/Jz8U3/13/