Blob构造函数浏览器兼容性

我正在开发一个应用程序,其中我接收存储在UINT8阵列中的图像数据。
然后,我将这些数据转换为Blob,然后构建图像url

从服务器获取数据的简化代码:

变量数组;
var req=新的XMLHttpRequest();
var url=“img/”+uuid+““+segmentNumber+”.jpg”;
请求打开(“获取”,url,true);
req.responseType=“arraybuffer”;
req.onload=功能(oEvent){
var数据=请求响应;
数组=新的Int8Array(数据);
};

建造商:

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

Blob contsructor正在引发问题。除了移动和桌面设备上的Chrome之外,它在所有浏览器上都能正常工作

Blob的使用:

//在此处使用AJAX接收Uint8Array
//数组=。。。
//创建BLOB
var jpeg=new Blob([array.buffer],{type:“image/jpeg”});
var url=DOMURL.createObjectURL(jpeg);
img.src=url;

桌面Chrome给了我一个警告:在Blob构造函数中不推荐使用ArrayBuffer值。改用ArrayBufferView。

移动Chrome给我一个错误非法构造函数

如果我将构造函数更改为在Chrome上工作,它将在其他浏览器上失败

所以,这实际上是两个不同的问题。桌面Chrome警告是Chrome中的一个bug,自2013年3月21日起修复

由于不支持blob构造函数,Mobile Chrome会给您一个TypeError。相反,您必须使用旧的BlobbuilderAPI。BlobbuilderAPI具有特定于浏览器的BlobBuilder构造函数。FF6-12、Chrome 8-19、移动Chrome、IE10和安卓3.0-4.2就是这样

var数组=新的Int8Array([17,-45.3]);
试一试{
var jpeg=newblob([array],{type:“image/jpeg”});
}
捕获(e){
//旧chrome和FF的类型错误
window.BlobBuilder=window.BlobBuilder | |
window.WebKitBlobBuilder |
window.MozBlobBuilder|
window.MSBlobBuilder;
if(e.name==“TypeError”和&window.BlobBuilder){
var bb=新的BlobBuilder();
追加(array.buffer);
var jpeg=bb.getBlob(“图像/jpeg”);
}
否则如果(e.name==“InvalidStateError”){
//InvalidStateError(在FF13 WinXP上测试)
var jpeg=new Blob([array.buffer],{type:“image/jpeg”});
}
否则{
//我们完蛋了,一团
}
}

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

发表评论