[英]Blob constructor browser compatibility
我正在開發一個應用程序,我收到存儲在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 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為我提供了一個警告 : ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.
ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.
移動Chrome給了我一個錯誤 : illegal constructor
如果我將構造函數更改為在Chrome上運行,則在其他瀏覽器上會失敗。
所以,這些實際上是兩個不同的問題。 桌面Chrome警告是Chrome中的一個錯誤 ,自2013-03-21以來已修復。
移動Chrome會為您提供TypeError,因為不支持blob構造函數。 相反,您必須使用舊的BlobBuilder API。 BlobBuilder API具有特定於瀏覽器的 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/
得到了你的代碼。 我只需要改變一些細節:
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.