Arraybuffer to base64 encoded string

javascript

async-programming

buffer

base64

byAlex Kataev·Nov 22, 2024

To convert an ArrayBuffer to a base64 string using JavaScript, use btoa and Uint8Array. Here's a compact solution:

function bufferToBase64(buf) {
  // 'apply' to handle large ArrayBuffer sizes, because the Spread operator might cause stack overflow
  return btoa(String.fromCharCode.apply(null, new Uint8Array(buf)));
}

// Usage:
const base64 = bufferToBase64(arrayBuffer); // Don't worry, 'arrayBuffer' is not as scary as it sounds
console.log(base64); // It's console log time!

Using the method String.fromCharCode.apply(null, ...), this snippet reliably converts binary strings to base64 before encoding with btoa.

When size matters (more than you think)

With larger ArrayBuffer instances, the previous approach could lead to a runtime error due to stack size limitations. Leverage Uint8Array.subarray() and Array.join() to process the ArrayBuffer in chunks and avoid stack overflow:

function bufferToBase64(buf) {
  const chunks = [];
  const uint8 = new Uint8Array(buf);
  const chunkSize = 0x8000; // Arbitrary number, not like the chicken number in the Hitchhiker's Guide to the Galaxy
  for (let i = 0; i < uint8.length; i += chunkSize) {
    const chunk = uint8.subarray(i, Math.min(i + chunkSize, uint8.length));
    chunks.push(String.fromCharCode(...chunk));
  }
  return btoa(chunks.join(''));
}

Node.js, Assemble!

In Node.js, the conversion is performed via Buffer class, a built-in, optimized tool:

function bufferToBase64(buf) {
  return Buffer.from(buf).toString('base64');
}

// Node.js: "This looks like a job for me!"

No fear of large ArrayBuffer sizes. Node.js' Buffer class is optimized for handling large data sets efficiently.

Asynchronous climbing: Start your engines

Async conversions are especially useful in I/O operations or when working with the File API in browsers:

function asyncBufferToBase64(buf) {
  return new Promise((resolve, reject) => {
    const blob = new Blob([buf]);
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
  });

  // Beware: Promises might be more catchy (and harder to debug) than the latest viral TikTok song!
}

// Usage:
asyncBufferToBase64(arrayBuffer).then(base64 => {
  console.log(base64.split(',')[1]); // Logs the base64 string without MIME type. And yes, split is still faster than your average break-up soundtrack!
}).catch(err => console.error(err)); // For real, always handle your errors. Better safe than sorry!

You're reading a Blob constructed from ArrayBuffer as a data URL, and asynchronously returning the base64 encoded string.

Advanced optimizations: Break the sound barrier!

Approach your conversion strategically. Here are three optimizations (read: steroids) for your performance-heavy use cases:

Typed Arrays: Matching your data content to a typed array is like a good date, it gives enhanced performance.
Web Workers: Heavy UI thread? Let Web Worker handle the conversion. It's like delegating your errands while you Netflix and chill.
Streaming: For a large dataset, process ArrayBuffer as a stream, encoding as you read. Your memory (and sanity) will thank you!

Handling limitations and pitfalls

Navigating the world of encoding from ArrayBuffer to base64 means understanding possible issues:

Character Encoding: Proper encoding reduces errors and is as important as your morning coffee.
Data URI: Using base64 data as a Data URI? Include the MIME type, just like you'd never forget to attach a file in an email, right?
Error Handling: Implement robust error handling: the "seatbelt" of coding.
Performance: Chunk sizes and methods affect speed and safety. Like driving, you need both!