How to go from Blob to ArrayBuffer

You can use FileReader to read the Blob as an ArrayBuffer.

Here's a short example:

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

Here's a longer example:

// ArrayBuffer -> Blobvar uint8Array  = new Uint8Array([1, 2, 3]);var arrayBuffer = uint8Array.buffer;var blob        = new Blob([arrayBuffer]);// Blob -> ArrayBuffervar 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

This was tested out in the console of Chrome 27—69, Firefox 20—60, and Safari 6—11.

Here's also a live demonstration which you can play with: https://jsfiddle.net/potatosalad/FbaM6/

Update 2018-06-23: Thanks to Klaus Klein for the tip about event.target.result versus this.result

Reference:

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

The Response API consumes a (immutable) Blob from which the data can be retrieved in several ways. The OP only asked for ArrayBuffer, and here's a demonstration of it.

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>

alternatively you could use this:

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

Note: This API isn't compatible with older (ancient) browsers so take a look to the Browser Compatibility Table to be on the safe side ;)

Or you can use the fetch API

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

I don't know what the performance difference is, and this will show up on your network tab in DevTools as well.