33

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

Blobcontsructorが問題を引き起こしています。モバイルデバイスとデスクトップデバイスの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.

モバイルChromeでエラーが発生します：illegal constructor

Chromeで動作するようにコンストラクターを変更すると、他のブラウザーでは失敗します。

4

2 に答える 2

29

したがって、これらは実際には2つの異なる問題です。デスクトップChromeの警告は、2013-03-21以降に修正されたChromeのバグでした。

BLOBコンストラクターがサポートされていないため、モバイルChromeでTypeErrorが発生します。代わりに、古いBlobBuilderAPIを使用する必要があります。BlobBuilder APIには、ブラウザー固有のBlobBuilderコンストラクターがあります。これは、FF6-12、Chrome 8-19、モバイルChrome、IE10、およびAndroid3.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/

于 2013-03-08T20:38:10.790 に答える
1

コードで動作するようになりました。少しだけ詳細を変更する必要がありました。

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

bb.append（data）; //データは角かっこなしである必要があります

すべてのブラウザーで機能するようになった私の関数（コンストラクター）：

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;
}
于 2013-03-11T09:56:57.363 に答える