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

Blob 构造函数导致了问题。它适用于所有浏览器，但移动和桌面设备上的 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;

Desktop Chrome 给我一个警告:ArrayBuffer values are deprecated in Blob Constructor。请改用 ArrayBufferView。

Mobile Chrome 给我一个错误:illegal constructor

如果我更改构造函数以在 Chrome 上运行，它在其他浏览器上会失败。

Answer 1

所以，这实际上是两个不同的问题。桌面 Chrome 警告是 bug在自 2013-03-21 以来固定的 chrome 中。

由于不支持 blob 构造函数，移动版 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   
    }
}

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