web-dev-qa-db-ja.com

BlobからArrayBufferに移動する方法

私はBlobを研究していましたが、ArrayBufferがある場合、次のようにこれをBlobに簡単に変換できることに気付きました。

var dataView = new DataView(arrayBuffer);
var blob = new Blob([dataView], { type: mimeString });

私が今疑問に思っているのは、BlobからArrayBufferに移動することは可能ですか？

javascriptblobarraybuffer
97
Jeanluca Scaljeri

newResponse APIは、（不変） Blob からデータをデコードできます。これは、 Fetch API が使用するコアAPIです。

var blob = GetABlobSomehow();
var arrayBuffer = null;

/* Use the await keyword to wait for the Promise to resolve */
arrayBuffer = await new Response(blob).arrayBuffer();   //: ArrayBuffer

または、これを使用することもできます（synchronous）：

new Response(blob).arrayBuffer()
.then(/* callback function */);

blobのバックエンドオクテットでは、promiseから返されたArrayBufferにストリーミングされます。

注：このAPIは古いブラウザではサポートされていないため、 ブラウザ互換性テーブル 安全のため。

13
nullptr

FileReaderを使用して、BlobをArrayBufferとして読み取ることができます。

以下に短い例を示します。

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

長い例を次に示します。

// ArrayBuffer -> Blob
var uint8Array  = new Uint8Array([1, 2, 3]);
var arrayBuffer = uint8Array.buffer;
var blob        = new Blob([arrayBuffer]);

// Blob -> ArrayBuffer
var uint8ArrayNew  = null;
var arrayBufferNew = null;
var fileReader     = new FileReader();
fileReader.onload  = function(event) {
    arrayBufferNew = event.target.result;
    uint8ArrayNew  = new Uint8Array(arrayBufferNew);

    // warn if read values are not the same as the original values
    // arrayEqual from: http://stackoverflow.com/questions/3115982/how-to-check-javascript-array-equals
    function arrayEqual(a, b) { return !(a<b || b<a); };
    if (arrayBufferNew.byteLength !== arrayBuffer.byteLength) // should be 3
        console.warn("ArrayBuffer byteLength does not match");
    if (arrayEqual(uint8ArrayNew, uint8Array) !== true) // should be [1,2,3]
        console.warn("Uint8Array does not match");
};
fileReader.readAsArrayBuffer(blob);
fileReader.result; // also accessible this way once the blob has been read

これは、Chrome 27—69、Firefox 20—60、およびSafari 6—11のコンソールでテストされました。

また、次のライブデモもご利用いただけます。 https://jsfiddle.net/potatosalad/FbaM6/

2018-06-23更新：event.target.result対this.resultに関するヒントをくれたKlaus Kleinに感謝

参照：

133
potatosalad

@potatosalad氏の回答を補足するだけです。

実際に関数にアクセスする必要はありませんscopeonloadコールバックで結果を取得するには、eventで自由に以下を実行できますパラメータ：

var arrayBuffer;
var fileReader = new FileReader();
fileReader.onload = function(event) {
    arrayBuffer = event.target.result;
};
fileReader.readAsArrayBuffer(blob);

なぜこれが良いのですか？コンテキストを失うことなく矢印関数を使用できるためです

var fileReader = new FileReader();
fileReader.onload = (event) => {
    this.externalScopeVariable = event.target.result;
};
fileReader.readAsArrayBuffer(blob);
15
Klaus Klein

または、フェッチAPIを使用できます

fetch(URL.createObjectURL(myBlob)).then(res => res.arrayBuffer())

パフォーマンスの違いはわかりませんが、これはDevToolsのネットワークタブにも表示されます。

13
Arlen Beiler