What is the difference between an ArrayBuffer and a Blob?
JavascriptHtmlJavascript Problem Overview
I'm reading http://www.html5rocks.com/en/tutorials/file/xhr2/ and trying to figure out the difference between an ArrayBuffer
and a Blob
.
Aren't both containers comprised of bits? Hence, couldn't both containers be viewed in many ways (as 32-bit chunks, 16-bit chunks, etc.)?
Javascript Solutions
Solution 1 - Javascript
Summary
Unless you need the ability to write/edit (using an ArrayBuffer
), then Blob
format is probably best.
Detail
I came to this question from a different html5rocks page., and I found @Bart van Heukelom's comments to be helpful, so I wanted to elevate them to an answer here.
I also found helpful resources specific to ArrayBuffer
and Blob
objects. In summary: despite the emphasis on Blob
being immutable/"raw data" Blob
objects are easy to work with.
Resources that compare / contrast ArrayBuffer
vs Blob
:
- Mutability
- an
ArrayBuffer
can be changed (e.g. with aDataView
) - a
Blob
is immutable
- an
- Source / Availability in Memory
- Quoting Bart van Heukelom: > - An ArrayBuffer is in the memory, available for manipulation. > - A Blob can be on disk, in cache memory, and other places not readily available
- Access Layer
ArrayBuffer
will require some access layer like typed arraysBlob
can be passed directly into other functions likewindow.URL.createObjectURL
, as seen in the example from OP's URL.- However, as Mörre points out you may still need
File
-related interfaces and API's likeFileReader
to work with a Blob.
- However, as Mörre points out you may still need
- Convert
- You can convert
Blob
toArrayBuffer
and vice versa, which addresses the OP's "Aren't both containers comprised of bits?" - ArrayBuffer can be generated from a Blob using the
FileReader
'sreadAsArrayBuffer
method , or the async methodconst arrayBuffer = await blob.arrayBuffer()
(thanks to @Darren G) - Blob can be generated from an ArrayBuffer as @user3405291 points out
new Blob([new Uint8Array(data)]);
, shown in this answer
- You can convert
- Use in Other Libraries
jsZip
;(new JSZip()).loadAsync(...)
accepts bothArrayBuffer
andBlob
:String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise
- How does protocol handle ArrayBuffer vs Blob
- Websocket (aka WS / WSS)
- Use the webSocket's
binaryType
property (could have values "arraybuffer" or "blob") to "control the type of binary data being received over the WebSocket connection."
- Use the webSocket's
- XmlHttpRequest (aka XHR)
- Use the xhr's
responseType
property to "to change the expected response type from the server" (valid values include "arraybuffer", "blob", and others like "document", "json", and "text") - > the response property will contain the entity body according to
responseType
, as an ArrayBuffer, Blob, Document, JSON, or string.
- Use the xhr's
- Websocket (aka WS / WSS)
Other helpful documentation:
ArrayBuffer
> TheArrayBuffer
object is used to represent a generic, fixed-length > raw binary data buffer. You cannot directly manipulate the contents of > anArrayBuffer
; instead, you create one of the typed array objects or > aDataView
object which represents the buffer in a specific format, > and use that to read and write the contents of the buffer.Blob
> ABlob
object represents a file-like object of immutable, raw data. >Blob
represent data that isn't necessarily in a JavaScript-native > format. TheFile
interface is based onBlob
, inheriting blob > functionality and expanding it to support files on the user's system.
Solution 2 - Javascript
It's explained on the page.
ArrayBuffer
> An ArrayBuffer is a generic fixed-length container for binary data. They are super handy if you need a generalized buffer of raw data, but the real power behind these guys is that you can create "views" of the underlying data using JavaScript typed arrays. In fact, multiple views can be created from a single ArrayBuffer source. For example, you could create an 8-bit integer array that shares the same ArrayBuffer as an existing 32-bit integer array from the same data. The underlying data remains the same, we just create different representations of it.
BLOB
> If you want to work directly with a Blob and/or don't need to manipulate any of the file's bytes, use xhr.responseType='blob':
Solution 3 - Javascript
If you are dealing with something that is more similar to an immutable file that may be retrieved, stored, or served as a file over HTTP, a Blob has a useful feature: blob.type
(Web API docs, Nodejs docs). This returns a MIME type (such as image/png
) that you can you use for your Content-Type HTTP header when serving the blob.