Handling Binary Data in Frontend: ArrayBuffer, Blob, File, and Image Processing

Related Knowledge

Front‑end image processing usually involves downloading, compressing, and format conversion, all of which operate on binary data in JavaScript.

Binary Data APIs in JavaScript

Common binary data types are ArrayBuffer , Blob , File , and FileReader .

ArrayBuffer

ArrayBuffer represents a fixed‑length raw binary buffer. It cannot be accessed directly; you must use TypedArray or DataView to read or write data.

new TypedArray();
new TypedArray(length);
new TypedArray(typedArray);
new TypedArray(buffer, byteOffset?, length?);

Examples of using TypedArray to manipulate an ArrayBuffer :

const buffer = new ArrayBuffer(16); // create a 16‑byte buffer
let view = new Uint16Array(buffer); // treat it as an array of 16‑bit unsigned integers
console.log(view.length); // 8
console.log(view.byteLength); // 16
console.log(view[0]); // 0
view[0] = 2333;
console.log(view[0]); // 2333

Using DataView :

const buffer = new ArrayBuffer(16);
let view = new DataView(buffer);
console.log(view.getUint16(0)); // 0
view.setUint16(0, 2333);
console.log(view.getUint16(0)); // 2333

Blob

Blob (Binary Large Object) is a collection of binary data, often used for images, audio, or other media. In JavaScript a Blob is an immutable, raw‑data‑like file object.

Conversion between Blob and ArrayBuffer (or other BufferSource ) is straightforward:

const blob = new Blob(BufferSource, options);
blob.arrayBuffer().then(buffer => console.log(buffer));

When handling large blobs (>2 GB), converting to a stream is more efficient.

File and FileReader

File inherits from Blob and adds file‑system‑related methods, allowing direct conversion between File and Blob .

FileReader reads data from a Blob or File and provides methods such as readAsArrayBuffer , readAsText , and readAsDataURL .

The Front‑End Journey of an Image

1. Local Preview – File/Blob to DataURL

function preview(file) {
  const reader = new FileReader();
  reader.onload = e => {
    const output = document.querySelector('.preview');
    output.src = e.target.result;
  };
  reader.readAsDataURL(file); // convert file to DataURL and trigger onload
}

A DataURL consists of a prefix ( data: ), MIME type, optional ;base64 , and the base64‑encoded data.

Base64 encoding/decoding can be done with btoa() and atob() .

2. Image Download – BufferSource to Blob

function download(res, name) => {
  const blob = new Blob(res, { type: 'image/png' });
  const url = URL.createObjectURL(blob);
  const elink = document.createElement('a');
  elink.download = name ?? '';
  elink.style.display = 'none';
  elink.href = url;
  document.body.appendChild(elink);
  elink.click();
  document.body.removeChild(elink);
  URL.revokeObjectURL(url);
};

Remember to call URL.revokeObjectURL to release the resource.

3. Format Conversion & Simple Compression – Blob to DataURL

// Convert a JPG image to PNG using canvas
const img = document.querySelector('.img');
const canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
canvas.toBlob(callback, 'image/png'); // PNG output
canvas.toDataURL('image/jpg', 0.8); // JPG output with quality 0.8

4. Real Type Detection – File/Blob to ArrayBuffer

File signatures (magic numbers) at the file header determine the true type.

const ImgExt2Hex = {
  ffd8ffe0: "jpg",
  ffd8ffe1: "jpg",
  ffd8ffe2: "jpg",
  ffd8ffe3: "jpg",
  89504e47: "png",
  47494638: "gif",
  52494646: "webp",
};
function getFileRealTypeByFile(file) {
  return new Promise(resolve => {
    const fr = new FileReader();
    fr.onload = e => {
      const view = new DataView(e.target.result);
      const hex = Number(view.getUint32(0, false)).toString(16);
      resolve(ImgExt2Hex[hex]);
    };
    fr.readAsArrayBuffer(file);
  });
}

Summary & Outlook

This article reviews JavaScript binary APIs and their common front‑end image‑processing scenarios, from preview and download to format conversion and type detection.

Because of browser performance limits, heavy tasks such as high‑quality compression or video transcoding are usually delegated to back‑end services. However, with WebAssembly the performance gap is narrowing, enabling sophisticated image manipulation, large‑scale games, and video editing directly in the browser.

WebAssembly is expected to become the default execution environment for any task that can be compiled to binary, further expanding the capabilities of web front‑ends.