🔐
← ZurĂŒck zu Anleitungen

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

· Tags: javascript, base64, btoa, atob, nodejs, encoding, web-development

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.

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