Blob 构造函数浏览器兼容性 [英] Blob constructor browser compatibility

问题描述

我正在开发一个应用程序，用于接收存储在 uint8Array 中的图像数据.然后我将这些数据转换为 Blob，然后构建图像 url.

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

var 数组；var req = new XMLHttpRequest();var url = "img/" + uuid + "_" +segmentNumber+".jpg";req.open("GET", url, true);req.responseType = "arraybuffer";req.onload = 函数(oEvent){var data = req.response;数组 = new Int8Array(data);};

构造函数:

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

Blob 构造函数导致问题.它适用于移动和桌面设备上除 Chrome 之外的所有浏览器.

Blob 的使用:

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

Desktop Chrome 给了我一个警告:ArrayBuffer 值在 Blob 构造函数中已被弃用.改用 ArrayBufferView.

Mobile Chrome 给我一个错误:非法构造函数

如果我更改构造函数以在 Chrome 上工作，它在其他浏览器上会失败.

解决方案

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

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

<块引用>

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

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

var NewBlob = 函数(数据，数据类型){无功而返；尝试 {out = new Blob([data], {type: datatype});console.debug("case 1");}抓住 (e) {window.BlobBuilder = window.BlobBuilder ||window.WebKitBlobBuilder ||window.MozBlobBuilder ||窗口.MSBlobBuilder;if (e.name == 'TypeError' && window.BlobBuilder) {var bb = new BlobBuilder();bb.append(data);out = bb.getBlob(数据类型);console.debug("case 2");}else if (e.name == "InvalidStateError") {//InvalidStateError(在 FF13 WinXP 上测试)out = new Blob([data], {type: datatype});console.debug("case 3");}别的 {//我们搞砸了，完全不支持 blob 构造函数控制台调试(错误")；}}返回；}

I am developping an application where I recieve image data stored in a uint8Array. I then transform this data to a Blob and then build the image url.

Simplified code to get data from server:

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

Constructor:

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

The Blob contsructor is causing problem. It works fine on all browsers except Chrome on mobile and desktop devices.

Use of 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 gives me a warnning : ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

Mobile Chrome gives me an error: illegal constructor

If I change the constructor to work on Chrome it fails on other browsers.

解决方案

Got it working with your code. I only had to change some little detail:

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

bb.append(data); // data must be with no brackets

My function(constructor) that works now for all browsers:

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

这篇关于Blob 构造函数浏览器兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！