Blob constructor khả năng tương thích trình duyệt

Question

Tôi đang phát triển một ứng dụng mà tôi nhận được dữ liệu hình ảnh được lưu trữ trong uint8Array. Sau đó tôi chuyển dữ liệu này thành Blob và sau đó xây dựng url hình ảnh.

đang Giản để lấy dữ liệu từ máy chủ:

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

vị thi công:

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

Các contsructor Blob đang gây ra vấn đề. Nó hoạt động tốt trên tất cả các trình duyệt ngoại trừ Chrome trên thiết bị di động và máy tính để bàn.

Sử dụng 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 mang lại cho tôi một warnning: ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

Mobile Chrome mang lại cho tôi một lỗi : illegal constructor

Nếu tôi thay đổi các nhà xây dựng để làm việc trên Chrome nó không thành công trên các trình duyệt khác.

Answer 1

Got nó làm việc với mã của bạn. Tôi chỉ phải thay đổi một số chi tiết nhỏ:

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

bb.append (dữ liệu); // dữ liệu phải không có dấu ngoặc

chức năng của tôi (constructor) mà làm việc ngay bây giờ cho tất cả các trình duyệt:

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

Vì vậy, đây thực sự là hai vấn đề khác nhau. Cảnh báo Chrome dành cho máy tính để bàn là một bug trong chrome được khắc phục kể từ 2013-03-21.

Chrome dành cho thiết bị di động cung cấp cho bạn lỗi TypeError vì hàm tạo blob không được hỗ trợ. Thay vào đó, bạn phải sử dụng API BlobBuilder cũ. API BlobBuilder có các nhà xây dựng BlobBuilder là browser specific. Đây là trường hợp của FF6 - 12, Chrome 8-19, Chrome di động, IE10 và 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/