Base64 coderen/decoderen in JavaScript: btoa(), atob() en Unicode

Base64 coderen en decoderen in JavaScript

JavaScript biedt verschillende ingebouwde manieren om Base64-tekenreeksen te coderen en te decoderen. Of u nu een browserapplicatie of een Node.js-server bouwt, inzicht in het werken met Base64 is essentieel voor het verwerken van binaire gegevens in op tekst gebaseerde formaten zoals JSON, HTML en URL's.

btoa() en atob() gebruiken in de browser

De twee kernfuncties voor Base64 in browser-JavaScript zijn btoa() en atob(). Deze functienamen volgen een oudere naamgevingsconventie — btoa staat voor "binary to ASCII" en atob voor "ASCII to binary". Ze worden al tientallen jaren ondersteund in alle grote browsers.

Coderen met btoa()

const originalString = 'Hello, world!';
const encoded = btoa(originalString);
console.log(encoded);
// Output: SGVsbG8sIHdvcmxkIQ==

Decoderen met atob()

const base64String = 'SGVsbG8sIHdvcmxkIQ==';
const decoded = atob(base64String);
console.log(decoded);
// Output: Hello, world!

Beide functies werken met tekenreeksen die alleen Latin-1-tekens bevatten (elk teken vertegenwoordigd door één byte). Dit is een belangrijke beperking die we hierna behandelen.

Omgaan met Unicode- en niet-ASCII-tekens

Een veelvoorkomende valkuil: btoa() genereert een fout wanneer het tekenreeksen krijgt met tekens buiten het Latin-1-bereik, zoals emoji, Chinese tekens of letters met accenten.

btoa('Hello 你好');
// Error: The string to be encoded contains characters outside of the Latin-1 range.

Om Unicode-tekenreeksen te coderen, moet u de tekenreeks eerst omzetten naar bytes en die bytes vervolgens coderen. De moderne aanpak gebruikt de TextEncoder- en TextDecoder-API's:

function unicodeToBase64(str) {
  const bytes = new TextEncoder().encode(str);
  const binaryString = String.fromCharCode(...bytes);
  return btoa(binaryString);
}

function base64ToUnicode(base64) {
  const binaryString = atob(base64);
  const bytes = Uint8Array.from(binaryString, (c) => c.charCodeAt(0));
  return new TextDecoder().decode(bytes);
}

// Usage
const encoded = unicodeToBase64('Hello 你好 🚀');
console.log(encoded);
// Output: SGVsbG8g5L2g5aW9IPCfj4A=

const decoded = base64ToUnicode(encoded);
console.log(decoded);
// Output: Hello 你好 🚀

Een oudere techniek gebruikt encodeURIComponent en decodeURIComponent, maar de aanpak met TextEncoder/TextDecoder is robuuster en is de aanbevolen moderne oplossing.

Binaire gegevens coderen (ArrayBuffer)

Wanneer u met bestanden, afbeeldingen of onbewerkte binaire gegevens van API's zoals fetch of FileReader werkt, hebt u doorgaans een ArrayBuffer of Uint8Array. Zo converteert u die naar Base64:

function arrayBufferToBase64(buffer) {
  const bytes = new Uint8Array(buffer);
  let binaryString = '';
  for (let i = 0; i < bytes.length; i++) {
    binaryString += String.fromCharCode(bytes[i]);
  }
  return btoa(binaryString);
}

function base64ToArrayBuffer(base64) {
  const binaryString = atob(base64);
  const bytes = new Uint8Array(binaryString.length);
  for (let i = 0; i < binaryString.length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

Een bestand naar Base64 converteren in de browser

Hier is een volledig voorbeeld met FileReader om een door de gebruiker geselecteerd bestand te converteren naar een Base64-data-URL:

function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.querySelector('input[type="file"]').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  try {
    const dataUrl = await fileToBase64(file);
    console.log(dataUrl); // data:image/png;base64,iVBORw0KGgo...
  } catch (err) {
    console.error('Conversion failed:', err);
  }
});

Base64 gebruiken in Node.js

Node.js biedt de Buffer-klasse voor Base64-bewerkingen, die flexibeler is dan btoa/atob in de browser. De Buffer-klasse verwerkt codering en decodering automatisch, inclusief Unicode, en ondersteunt meerdere coderingsformaten.

Basis-codering en -decodering

// Encode a string to Base64
const encoded = Buffer.from('Hello, world!').toString('base64');
console.log(encoded);
// Output: SGVsbG8sIHdvcmxkIQ==

// Decode a Base64 string back to text
const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
console.log(decoded);
// Output: Hello, world!

Unicode-ondersteuning in Node.js

In tegenstelling tot btoa() in de browser verwerkt Node.js Buffer Unicode naadloos:

const encoded = Buffer.from('Hello 你好 🚀').toString('base64');
console.log(encoded);
// Output: SGVsbG8g5L2g5aW9IPCfj4A=

const decoded = Buffer.from(encoded, 'base64').toString('utf-8');
console.log(decoded);
// Output: Hello 你好 🚀

Een bestand lezen en coderen als Base64

const fs = require('fs');

// Read a file and encode it to Base64
const buffer = fs.readFileSync('image.png');
const base64 = buffer.toString('base64');
const dataUrl = `data:image/png;base64,${base64}`;

Base64url-codering in Node.js

Node.js 15.7.0+ ondersteunt native Base64url-codering, die + vervangt door - en / door _ en de opvulling weglaat:

const encoded = Buffer.from('Hello, world!').toString('base64url');
console.log(encoded);
// Output: SGVsbG8sIHdvcmxkIQ (no padding)

const decoded = Buffer.from(encoded, 'base64url').toString('utf-8');
console.log(decoded);
// Output: Hello, world!

Prestatieoverwegingen

Voor grote gegevens kunnen herhaalde Base64-bewerkingen traag zijn. Hier zijn enkele tips:

• Gebruik TextEncoder/TextDecoder in plaats van handmatige conversies voor Unicode-tekenreeksen
• In Node.js is Buffer.from() sterk geoptimaliseerd — geef dit de voorkeur boven handmatige implementaties
• Vermijd het converteren van grote bestanden naar Base64 tenzij noodzakelijk (overweeg streaming)
• Voor grote gegevenssets kunt u overwegen Blob en FileReader in de browser te gebruiken om blokkering van de hoofdthread te voorkomen

Probeer Base64-codering online

Experimenteer met coderen en decoderen rechtstreeks in uw browser met behulp van onze gratis online Base64-coder en -decoder. Geen code nodig — plak gewoon tekst of upload een bestand en u krijgt direct het Base64-resultaat.