Base64-Kodierung/-Dekodierung in JavaScript: btoa(), atob() und Unicode

Base64-Kodierung und -Dekodierung in JavaScript

JavaScript bietet mehrere eingebaute Möglichkeiten, Base64-Strings zu kodieren und zu dekodieren. Ob Sie eine Browser-Anwendung oder einen Node.js-Server entwickeln — das Verständnis der Arbeit mit Base64 ist für die Handhabung von Binärdaten in textbasierten Formaten wie JSON, HTML und URLs unerlässlich.

Verwenden von btoa() und atob() im Browser

Die beiden Kernfunktionen für Base64 im Browser-JavaScript sind btoa() und atob(). Diese Funktionsnamen folgen einer älteren Namenskonvention — btoa steht für "binary to ASCII" und atob für "ASCII to binary". Sie werden seit Jahrzehnten von allen gängigen Browsern unterstützt.

Kodieren mit btoa()

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

Dekodieren mit atob()

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

Beide Funktionen arbeiten mit Strings, die nur Latin-1-Zeichen enthalten (jedes Zeichen wird durch ein einzelnes Byte dargestellt). Dies ist eine wichtige Einschränkung, die wir als Nächstes behandeln werden.

Umgang mit Unicode- und Nicht-ASCII-Zeichen

Eine häufige Stolperfalle: btoa() wirft einen Fehler, wenn ihm Strings mit Zeichen außerhalb des Latin-1-Bereichs übergeben werden, wie Emojis, chinesische Zeichen oder akzentuierte Buchstaben.

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

Um Unicode-Strings zu kodieren, müssen Sie den String zuerst in Bytes umwandeln und diese Bytes anschließend kodieren. Der moderne Ansatz verwendet die TextEncoder- und TextDecoder-APIs:

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 你好 🚀

Eine ältere Technik verwendet encodeURIComponent und decodeURIComponent, aber der TextEncoder/TextDecoder-Ansatz ist robuster und die empfohlene moderne Lösung.

Kodierung von Binärdaten (ArrayBuffer)

Bei der Arbeit mit Dateien, Bildern oder rohen Binärdaten von APIs wie fetch oder FileReader haben Sie in der Regel einen ArrayBuffer oder ein Uint8Array. Hier ist, wie Sie ihn in Base64 umwandeln:

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;
}

Konvertieren einer Datei in Base64 im Browser

Hier ist ein vollständiges Beispiel mit FileReader, um eine vom Benutzer ausgewählte Datei in eine Base64-Data-URL umzuwandeln:

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);
  }
});

Verwenden von Base64 in Node.js

Node.js bietet die Buffer-Klasse für Base64-Operationen, die flexibler ist als btoa/atob im Browser. Die Buffer-Klasse übernimmt Kodierung und Dekodierung automatisch, einschließlich Unicode, und unterstützt mehrere Kodierungsformate.

Grundlegende Kodierung und Dekodierung

// 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-Unterstützung in Node.js

Im Gegensatz zu btoa() im Browser handhabt der Node.js-Buffer Unicode nahtlos:

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 你好 🚀

Lesen einer Datei und Kodieren 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-Kodierung in Node.js

Node.js 15.7.0+ unterstützt die native Base64url-Kodierung, die + durch - und / durch _ ersetzt und das Padding weglässt:

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!

Leistungsüberlegungen

Bei großen Datenmengen können wiederholte Base64-Operationen langsam sein. Hier sind einige Tipps:

• Verwenden Sie TextEncoder/TextDecoder anstelle manueller Konvertierungen für Unicode-Strings
• In Node.js ist Buffer.from() hochgradig optimiert — bevorzugen Sie es gegenüber manuellen Implementierungen
• Vermeiden Sie das Konvertieren großer Dateien in Base64, sofern nicht notwendig (ziehen Sie Streaming in Betracht)
• Für große Datensätze sollten Sie im Browser Blob und FileReader verwenden, um das Blockieren des Hauptthreads zu vermeiden

Probieren Sie Base64-Kodierung online aus

Experimentieren Sie direkt in Ihrem Browser mit unserem kostenlosen Online-Base64-Encoder und -Decoder. Keine Programmierkenntnisse erforderlich — fügen Sie einfach Text ein oder laden Sie eine Datei hoch und erhalten Sie sofort das Base64-Ergebnis.