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.)?
arrayBuffer() The arrayBuffer() method in the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer .
The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. It is an array of bytes, often referred to in other languages as a "byte array".
Basically ArrayBuffer is used to keep binary data. It can be the binary data of an image for example. In other languages buffers are proved very useful.
The basic binary object is ArrayBuffer – a reference to a fixed-length contiguous memory area. This allocates a contiguous memory area of 16 bytes and pre-fills it with zeroes.
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
:
ArrayBuffer
can be changed (e.g. with a DataView
)Blob
is immutable
- An ArrayBuffer is in the memory, available for manipulation.
- A Blob can be on disk, in cache memory, and other places not readily available
ArrayBuffer
will require some access layer like typed arrays Blob
can be passed directly into other functions like window.URL.createObjectURL
, as seen in the example from OP's URL. File
-related interfaces and API's like FileReader
to work with a Blob.Blob
to ArrayBuffer
and vice versa, which addresses the OP's "Aren't both containers comprised of bits?" FileReader
's readAsArrayBuffer
method , or the async method const arrayBuffer = await blob.arrayBuffer()
(thanks to @Darren G)new Blob([new Uint8Array(data)]);
, shown in this answer jsZip
; (new JSZip()).loadAsync(...)
accepts both ArrayBuffer
and Blob
: String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise
binaryType
property (could have values "arraybuffer" or "blob") to "control the type of binary data being received over the WebSocket connection."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.
Other helpful documentation:
ArrayBuffer
The
ArrayBuffer
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
A
Blob
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With