Cara beralih dari Blob ke ArrayBuffer

Saya sedang mempelajari Blob, dan saya perhatikan bahwa ketika Anda memiliki ArrayBuffer, Anda dapat dengan mudah mengonversinya menjadi Blob sebagai berikut:

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

Pertanyaan yang saya miliki sekarang adalah, apakah mungkin untuk beralih dari Blob ke ArrayBuffer?

The ResponseAPI mengkonsumsi (berubah) Blobdari mana data dapat diambil dalam beberapa cara. Para OP hanya meminta ArrayBuffer, dan inilah demonstrasi itu.

var blob = GetABlobSomehow();

// NOTE: you will need to wrap this up in a async block first.
/* Use the await keyword to wait for the Promise to resolve */
await new Response(blob).arrayBuffer();   //=> <ArrayBuffer>

alternatifnya Anda bisa menggunakan ini:

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

Catatan: Ini API tidak kompatibel dengan yang lebih tua ( kuno browser) sehingga kita lihat ke Browser Compatibility Table untuk berada di sisi yang aman;)

Anda dapat menggunakan FileReaderuntuk membaca Blobsebagai file ArrayBuffer.

Berikut contoh singkatnya:

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

Berikut contoh yang lebih panjang:

// 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

Ini telah diuji di konsol Chrome 27—69, Firefox 20—60, dan Safari 6—11.

Berikut juga demonstrasi langsung yang dapat Anda mainkan: https://jsfiddle.net/potatosalad/FbaM6/

Perbarui 2018-06-23: Terima kasih kepada Klaus Klein untuk tip tentang event.target.resultversusthis.result

Referensi:

• https://developer.mozilla.org/en-US/docs/Web/API/FileReader#readAsArrayBuffer ()
• https://www.w3.org/TR/FileAPI/#dfn-readAsArrayBuffer

Sekadar melengkapi jawaban Pak @potatosalad.

Anda sebenarnya tidak perlu mengakses cakupan fungsi untuk mendapatkan hasil pada callback onload , Anda dapat dengan bebas melakukan hal berikut pada parameter peristiwa :

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

Mengapa ini lebih baik? Karena dengan demikian kita dapat menggunakan fungsi panah tanpa kehilangan konteksnya

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

Atau Anda dapat menggunakan API pengambilan

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

Saya tidak tahu apa perbedaan kinerjanya, dan ini akan muncul di tab jaringan Anda di DevTools juga.

Ada sekarang (76+ & FF 69+ Chrome) a Blob.prototype.arrayBuffer () metode yang akan mengembalikan Janji menyelesaikan dengan ArrayBuffer mewakili data Blob ini.

(async () => {
  const blob = new Blob(['hello']);
  const buf = await blob.arrayBuffer();
  console.log( buf.byteLength ); // 5
})();