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;

桌面Chrome给我一个警告: ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

Mobile Chrome给我一个错误: illegal constructor

如果我改变构造函数在Chrome上工作，它在其他浏览器上失败。

Answer 1

这实际上是两个不同的问题。桌面Chrome警告是Chrome的一个bug，自2013-03-21以来已修复。

Mobile Chrome给你一个TypeError，因为blob构造函数不支持。相反，您必须使用旧的BlobBuilder API。BlobBuilder API具有特定于浏览器的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/

Answer 2

让它与您的代码一起工作。我只需要改变一些小细节:

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

bb.append(数据);//data不能带括号

我的函数(构造函数)现在适用于所有浏览器:

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