What Are Array Buffers, Uint8Array, and Base64 in Javascript

Binary Data in JavaScript 🖥️

Before diving into this topic, it's important to understand what binary data is and how it relates to creating an image or a file. This overview is not intended to be an in-depth exploration; it's meant to provide you with a basic understanding of these concepts and how they work together.

Working with binary data, like files, images (Read how images are presented), or streams, in JavaScript often involves concepts such as ArrayBuffer, Uint8Array, and Base64. Whether you're new to this or have forgotten these concepts, I'm here to break them down for you.

What is an ArrayBuffer?

ArrayBuffer is not an array of something.

Let’s eliminate a possible source of confusion: ArrayBuffer has nothing in common with an Array.

Key Characteristics of ArrayBuffer:

1. Fixed Length: The length of an ArrayBuffer is fixed; we cannot increase or decrease it.
2. Memory Usage: It takes up exactly the specified amount of space in memory.
3. Accessing Bytes: To access individual bytes of data, we need to use a "view" object, such as a TypedArray. You cannot use buffer[index] directly.

An ArrayBuffer is a fixed-length block of raw binary memory in JavaScript. You can think of it as a "container" for storing a sequence of bytes. However, it doesn’t interact with the data directly—it serves as the base structure for typed arrays, like Uint8Array, that allow you to manipulate the data.

Example:

This code reserves 16 bytes of memory (128 bits) in the memory, which is maintained by JavaScript's garbage collector. You can't resize the buffer, you must create a new one. An ArrayBuffer acts as a memory space, and you manipulate it using typed arrays like Uint8Array.

When to Use an ArrayBuffer?

• File and Network Operations:
  - Reading files (images, videos).
  - Handling binary protocols (e.g., WebSockets, streams).
• Data Parsing:
  - Manipulating binary data formats (e.g., .png, .wav files).
  - Decoding/encoding binary protocols.
• Web APIs:
  - Used with APIs like fetch() to handle raw data (e.g., response.arrayBuffer()).

What is a Uint8Array 

Uint8Array Stands for "Unsigned 8-bit Integer Array". It's a subclass of TypedArray and provides a way to interact with binary data stored in an ArrayBuffer.

How Does It Work?

A Uint8Array allows you to read and write binary data in 8-bit chunks (values between 0 and 255).

Uint8Array is specifically designed to work with binary data in a simpler, more efficient way. It’s commonly used for manipulating binary data like images, audio, and more.

Other Typed Arrays

There are other types of TypedArray classes that handle larger data sizes, such as:

• Uint16Array (16-bit unsigned integers)
• Uint32Array (32-bit unsigned integers)

These classes work similarly to Uint8Array but handle different data sizes.

What happens if Uint8Array Overflow

If you try to use a Uint8Array to save an image with a bit depth of 32, it will not be able to directly store the full 32-bit value. The Uint8Array only stores 8-bit values (ranging from 0 to 255).

For example, if a pixel has a value of 4 million (which in 32-bit binary is 00000000001111010000100100000000), and you try to store it in a Uint8Array, the value will be truncated using modulus arithmetic. Specifically, 4 million % 256 equals 0, so the pixel value stored in the Uint8Array would be 0.

This demonstrates that the 32-bit range (which can store much larger values) gets reduced to the 8-bit range of the Uint8Array when the data is stored, losing much of the original information.

Base64: Encoding Binary as Text 🔏

Base64 Is a method for encoding binary data into a string format, making it suitable for text-based protocols like JSON or HTTP. It converts binary data (which can't be easily transmitted via text-based protocols) into an ASCII string.

Why Use Base64?

Base64 is particularly useful for transmitting images or other large binary data as text. For example, an image can be converted into a Base64 string, making it easier to send over the web.

For example, the string "Hello World" in binary:

01001000 01100101 01101100 01101100 01101111 00100000 01010111 01101111 01110010 01101100

01100100

Converts into Base64 as:

SGVsbG8gV29ybGQ=

Base64 encoding increases the size of the data by approximately 33%, but it makes the data compatible with text-based formats. While you wouldn’t encode "Hello World" in a practical scenario, you do need to convert files that consist of binary arrays and array buffers.

Converting Uint8Array to Base64 🔄

You can convert Uint8Array data to a Base64 string using the btoa function:

This function converts a Uint8Array to a Base64-encoded string. Where btoa() means binary to ASCII and vice versa with atob()

How These Concepts Work Together 🤝

1. ArrayBuffer: Stores raw binary data.
2. Uint8Array: Provides an interface for manipulating that data.
3. Base64: Encodes the data for storage or transmission in text formats.

Example Workflow:

1. Download an image and store it in an ArrayBuffer.
2. Manipulate the image data using a Uint8Array.
3. Encode it in Base64 to send it via HTTP or embed it in a JSON file.

By understanding these three concepts—ArrayBuffer, Uint8Array, and Base64—you can easily work with binary data in JavaScript, whether you're dealing with file uploads, network protocols, or APIs.

Wrapping Up 🎉

That's it! I know this might be superficial, but this is my first educational post ever, and I hope one of you finds this helpful. Here is a summary of what you have just read:

1. ArrayBuffer:

   • A fixed-length block of raw binary memory in JavaScript.
   • It doesn't store data directly but serves as a container for binary data that can be manipulated with typed arrays like Uint8Array.
   • Example: new ArrayBuffer(16) Creates a buffer of 16 bytes.

2. Typed Arrays (Uint8Array):

   • A TypedArray is an array that represents a specific numeric type, such as Uint8Array for 8-bit unsigned integers.
   • It interacts with an ArrayBuffer to manipulate the binary data.
   • Example: let arr = new Uint8Array(buffer) Allows modifying data in the buffer.

3. Base64 Encoding:

   • Converts binary data into a text format, often used for transmitting data like images in text-based protocols like JSON or HTTP.
   • Example: "Hello World" converted to Base64 is SGVsbG8gV29ybGQ=.

4. Converting Between Formats:

   • btoa() and atob() are used to convert binary data to Base64 (binary-to-ASCII) and Base64 back to binary (ASCII-to-binary).

Example Workflow:

• Download an image → Store in an ArrayBuffer → Use Uint8Array to manipulate the data → Convert to Base64 for transfer.

For a more comprehensive guide about array buffers visit Javascript.info