斑点构造浏览器的兼容性 [英] Blob constructor browser compatibility

问题描述

我深化发展，其中我收到存储在uint8Array图像数据的应用程序。
我那么这个数据转换为一个斑点，然后生成图像的URL。

简体code从服务器获取数据：

  VAR阵列;VAR REQ =新XMLHtt prequest（）;
VAR URL =IMG /+ +的uuid_+ segmentNumber +JPG;
req.open（GET，网址，真实）;
req.responseType =arraybuffer;
req.onload =功能（oEvent）{
    VAR数据= req.response;
    阵列=新Int8Array（数据）;
};
 

构造器：

  =出新的Blob（[数据] {类型：数据类型}）;
 

团块contsructor有问题。它工作正常，对移动和桌面设备的Chrome以外的所有浏览器。

斑点的使用：

  //收到Uint8Array使用AJAX这里
//数组= ...
//创建BLOB
VAR JPEG =新的Blob（[array.buffer] {类型：图像/ JPEG}）;
VAR URL = DOMURL.createObjectURL（JPEG）;
img.src =网址;
 

桌面Chrome浏览器给我的 WARNNING ： ArrayBuffer值在斑点构造pcated德$ P $。使用ArrayBufferView来代替。

移动Chrome浏览器给我的错误：非法构造

如果我改变构造函数的Chrome浏览器失败在其他浏览器。

解决方案

明白了你的code工作。我只需要改变一些小细节：

 如果（e.name =='类型错误'和;＆安培; window.BlobBuilder）{
        VAR BB =新BlobBuilder（）;
        bb.append（数据）;
        OUT = bb.getBlob（数据类型）;
        console.debug（情况2）;
    }
 

  

bb.append（数据）; //数据必须是不带括号

我的函数（构造函数），现在适用于所有的浏览器：

  VAR NewBlob =功能（数据，数据类型）
{
    VAR出来;    尝试{
        OUT =新的Blob（[数据] {类型：数据类型}）;
        console.debug（案件1）;
    }
    赶上（E）{
        window.BlobBuilder = window.BlobBuilder ||
                window.WebKitBlobBuilder ||
                window.MozBlobBuilder ||
                window.MSBlobBuilder;        如果（e.name =='类型错误'和;＆安培; window.BlobBuilder）{
            VAR BB =新BlobBuilder（）;
            bb.append（数据）;
            OUT = bb.getBlob（数据类型）;
            console.debug（情况2）;
        }
        否则，如果（e.name ==InvalidStateError）{
            // InvalidStateError（FF13上的WinXP测试）
            OUT =新的Blob（[数据] {类型：数据类型}）;
            console.debug（案件3）;
        }
        其他{
            //我们就完蛋了，一滴不支持的构造完全
            console.debug（Errore）;
        }
    }
    返回的;
}
 

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

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