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

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
Answer from potatosalad on Stack Overflow
Top answer
1 of 7
162

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

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
2 of 7
77

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 */
const arrayBuffer = await new Response(blob).arrayBuffer();

Alternatively you could use this:

new Response(blob).arrayBuffer().then((arrayBuffer) => {
 // do something with the arrayBuffer
});

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

Discussions

Blobs and arrayBuffers - JavaScript - SitePoint Forums | Web Development & Design Community
I’ve been using the fetch API. Most examples use .json() to resolve the response body as JSON. Alternatively, fetch offers the methods arrayBuffer() and blob() to take the response stream and return a arrayBuffer or blob, respectively. I have been trying to read up about them on MDN, but ... More on sitepoint.com
🌐 sitepoint.com
0
August 13, 2017
javascript - ArrayBuffer to blob conversion - Stack Overflow
I have a project where I need to display djvu schemas in browser. I found this old library on Github which, as far as I understood, converts djvu files to bmp and then puts them into canvas elemen... More on stackoverflow.com
🌐 stackoverflow.com
[AskJS] Webworkers: passing blobs faster than passing ArrayBuffers as transferable in Chrome
what about with an "await blob.arrayBuffer" included(?) More on reddit.com
🌐 r/javascript
4
16
March 26, 2025
How do I extract a blob and it's array buffer, from a formidable variable, in node .js?
At the first glance, this looks like the uploaded file is already persisted under the path found in filepath. Why not try to read it? Or move to a more appropriate location? More on reddit.com
🌐 r/node
4
1
June 15, 2022
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Blob › arrayBuffer
Blob: arrayBuffer() method - Web APIs - MDN Web Docs
December 2, 2023 - The arrayBuffer() method of the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer.
🌐
Rip Tutorial
riptutorial.com › converting between blobs and arraybuffers
JavaScript Tutorial => Converting between Blobs and ArrayBuffers
var blob = new Blob(["\x01\x02\x03\x04"]); var arrayPromise = new Promise(function(resolve) { var reader = new FileReader(); reader.onloadend = function() { resolve(reader.result); }; reader.readAsArrayBuffer(blob); }); arrayPromise.then(function(array) { console.log("Array contains", array.byteLength, "bytes."); });
🌐
npm
npmjs.com › package › blob-to-arraybuffer
blob-to-arraybuffer - npm
July 4, 2017 - Promise API to turn a Blob into an ArrayBuffer · $ npm install --save blob-to-arraybuffer · const blobToArrayBuffer = require("blob-to-arraybuffer"); blobToArrayBuffer(blob).then(buffer => { // hurrah! }); fetch("file.dat") .then(res => res.blob) .then(blobToArrayBuffer) .then(buffer => { }); none ·
      » npm install blob-to-arraybuffer
    
Published   Jul 04, 2017
Version   0.0.1
🌐
Tabnine
tabnine.com › home › code library
Code Library - Tabnine
July 25, 2024 - Get the answers and suggestions you need from our AI code assistant. Get started in minutes with a free 90 day trial of Tabnine Pro.
🌐
Bun
bun.com › docs › guides › binary › blob-to-arraybuffer
Convert a Blob to an ArrayBuffer - Bun
const blob = new Blob(["hello world"]); const buf = await blob.arrayBuffer();
Find elsewhere
🌐
Medium
medium.com › @naveenkumarasinghe › javascript-lost-in-binaries-buffer-blob-uint8array-arraybuffer-ed8d2b4de44a
JavaScript: Lost in binaries — Buffer/Blob/UInt8Array/ArrayBuffer | by Naveen Kumarasinghe | Medium
April 2, 2023 - Blobs have additional encoding and metadata on top of binary data. These can also be created from strings, arrays, or other sources of data. Due to encoding blobs are usually less space efficient than ArrayBuffer and Uint8Array.
🌐
Medium
lucas-chow.medium.com › file-blob-arraybuffer-576a8e99de0d
File, Blob, ArrayBuffer. To start All of this, you need get a… | by Lucas Chow | Medium
May 26, 2020 - We can get its raw data by HEX-readers or just javascript. ... // html <input type="file" id="file1" />// js file1.files[0].arrayBuffer().then(resp=>{ let ui8 = new Uint8Array(resp); let rawData = [...ui8]; })
🌐
Reality Ripple
udn.realityripple.com › docs › Web › API › Blob › arrayBuffer
Blob.arrayBuffer() - Web APIs
var bufferPromise = blob.arrayBuffer(); blob.arrayBuffer().then(buffer => /* process the ArrayBuffer */); var buffer = await blob.arrayBuffer();
🌐
Webdevtutor
webdevtutor.net › blog › javascript-blob-to-arraybuffer
Converting Blob to ArrayBuffer in JavaScript
To convert a Blob to an ArrayBuffer, you can use the FileReader API provided by JavaScript.
🌐
GitHub
github.com › bobbyhadz › convert-blob-to-arraybuffer-in-javascript
GitHub - bobbyhadz/convert-blob-to-arraybuffer-in-javascript: A repository for an article at https://bobbyhadz.com/blog/convert-blob-to-arraybuffer-in-javascript · GitHub
To run the code, issue the npm start command. ... Alternatively, you can run the project in watch mode, so every time you save, the JavaScript server is restarted.
Author   bobbyhadz
🌐
SitePoint
sitepoint.com › javascript
Blobs and arrayBuffers - JavaScript - SitePoint Forums | Web Development & Design Community
August 13, 2017 - I’ve been using the fetch API. Most examples use .json() to resolve the response body as JSON. Alternatively, fetch offers the methods arrayBuffer() and blob() to take the response stream and return a arrayBuffer or blo…
🌐
GitHub
gist.github.com › robnyman › 1875241
Get file as an arraybuffer, create blob, read through FileReader and save in localStorage · GitHub
Get file as an arraybuffer, create blob, read through FileReader and save in localStorage - arraybuffer-blob-filereader-localStorage.js
🌐
npm
npmjs.com › package › blob-to-buffer
blob-to-buffer - npm
October 27, 2020 - var blob = new Blob([ new Uint8Array([1, 2, 3]) ], { type: 'application/octet-binary' }) toBuffer(blob, function (err, buffer) { if (err) throw err buffer[0] // => 1 buffer.readUInt8(1) // => 2 })
      » npm install blob-to-buffer
    
Published   Oct 27, 2020
Version   1.2.9
🌐
Reddit
reddit.com › r/javascript › [askjs] webworkers: passing blobs faster than passing arraybuffers as transferable in chrome
r/javascript on Reddit: [AskJS] Webworkers: passing blobs faster than passing ArrayBuffers as transferable in Chrome
March 26, 2025 -

I'm running some tests in Chrome with webworker and I'm finding quite odd that passing blobs back and forth is way, way faster than ArrayBuffers.

This is the testing code I'm using with a 1Gb file:

ArrayBuffer:

const buffer = await fetch('./1GbFile.bin').then(data => data.arrayBuffer());

console.time("Buffer")
worker.onmessage = function(e) {
  console.timeEnd("Buffer");
};

worker.onerror = function(e) {
  reject(e.message);
};

worker.postMessage(buffer, [buffer]);

Blob:

const blob = await fetch('./1GbFile.bin').then(data => data.blob());

console.time("Blob")
worker.onmessage = function(e) {
  console.timeEnd("Blob");
};

worker.onerror = function(e) {
  reject(e.message);
};

worker.postMessage(blob);

And this is the webworker, it just returns the same data it receives:

self.onmessage = function(e) {
    const data = e.data;
    if (data instanceof ArrayBuffer)
        self.postMessage(data, [data]);
    else
        self.postMessage(data);
}

And the staggering results:

Buffer: 34.46484375 ms
Blob: 0.208984375 ms

I knew blob was very optimized in this scenario, but I thought using the transferable option would make it work somehow similar, but it's more than 100 times slower.

And the transferable option is definitely doing its thing, removing the option makes it like 10 times slower.

Edit: The same code is way faster in Firefox:

Buffer: 2ms
Blob: 0ms

🌐
The Web Dev
thewebdev.info › home › how to convert arraybuffer to blob with javascript?
How to convert ArrayBuffer to blob with JavaScript? - The Web Dev
July 19, 2022 - Sometimes, we want to convert a binary Node.js Buffer to JavaScript ArrayBuffer. In this article,… ... Sometimes, we want to convert Blob to File in JavaScript.
🌐
JavaScript.info
javascript.info › tutorial › binary data, files
Blob
May 16, 2022 - We can get back ArrayBuffer from a Blob using blob.arrayBuffer(), and then create a view over it for low-level binary processing. Conversion streams are very useful when we need to handle large blob. You can easily create a ReadableStream from a blob.
🌐
Webdevtutor
webdevtutor.net › blog › javascript-blob-arraybuffer
Understanding JavaScript Blob and ArrayBuffer: A Comprehensive Guide
To convert a Blob to an ArrayBuffer, you can use the FileReader API to read the contents of the Blob as an ArrayBuffer. Conversely, you can create a new Blob from an ArrayBuffer by passing the ArrayBuffer to the Blob constructor. Understanding how to work with JavaScript Blob and ArrayBuffer ...