Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the difference between an ArrayBuffer and a Blob?

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.)?

like image 726
dangerChihuahua007 Avatar asked Aug 05 '12 23:08

dangerChihuahua007


People also ask

What is Blob ArrayBuffer?

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 .

What is 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".

What is the point of ArrayBuffer?

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.

Is ArrayBuffer a binary?

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.


1 Answers

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 a DataView)
    • a Blob is immutable
  • 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 arrays
    • Blob can be passed directly into other functions like window.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 like FileReader to work with a Blob.
  • Convert
    • You can convert Blob to ArrayBuffer 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's readAsArrayBuffer method , or the async method const 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
  • Use in Other Libraries
    • jsZip; (new JSZip()).loadAsync(...) accepts both ArrayBuffer and Blob: 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."
    • 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.

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 an ArrayBuffer; instead, you create one of the typed array objects or a DataView 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. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.

like image 192
The Red Pea Avatar answered Sep 27 '22 17:09

The Red Pea