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を除くすべてのブラウザで正常に動作します。ブロブの

用途：

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

デスクトップクロームは私にをwarnning を与える：私が変更した場合はillegal constructor

：ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

モバイルクロームは私にエラーを与えます作業するコンストラクタ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（データを）。 //データはすべてのブラウザのために機能するようになりましたなしブラケット

My機能（コンストラクタ）である必要があります。

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

これは実際には2つの異なる問題です。デスクトップChromeの警告はbugで、2013年3月21日以降に修正されました。

モバイルChromeは、BLOBコンストラクタがサポートされていないため、TypeErrorを提供しています。代わりに、古いBlobBuilder APIを使用する必要があります。 BlobBuilder APIには、browser specificのBlobBuilderコンストラクタがあります。これはFF6-12、Chrome 8-19、モバイル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/