Window: btoa() Methode

stringToEncode

Der zu kodierende Binärstring. Strings in JavaScript sind als UTF-16 kodiert, was bedeutet, dass jeder Charakter einen Codepunkt unter 256 haben muss, der ein Byte Daten repräsentiert.

Eine ASCII-Zeichenfolge, die die Base64-Darstellung von stringToEncode enthält.

InvalidCharacterError DOMException

Der String enthielt ein Zeichen, das nicht in ein einzelnes Byte passte. Siehe "Unicode-Zeichenfolgen" unten für mehr Details.

Base64 erwartet von Haus aus Binärdaten als Eingabe. In Bezug auf JavaScript-Strings bedeutet dies, dass Strings, bei denen der Codepunkt jedes Zeichens nur ein Byte belegt. Wenn Sie also einen String in btoa() übergeben, der Zeichen enthält, die mehr als ein Byte belegen, erhalten Sie einen Fehler, da dies nicht als Binärdaten angesehen wird:

const ok = "a";
console.log(ok.codePointAt(0).toString(16)); //   61: occupies < 1 byte

const notOK = "✓";
console.log(notOK.codePointAt(0).toString(16)); // 2713: occupies > 1 byte

console.log(window.btoa(ok)); // YQ==
console.log(window.btoa(notOK)); // error

Da btoa die Codepunkte seines Eingabestrings als Bytewerte interpretiert, wird ein "Character Out Of Range"-Ausnahme ausgelöst, wenn der Codepunkt eines Zeichens 0xff überschreitet. Für Anwendungsfälle, bei denen Sie beliebigen Unicode-Text kodieren müssen, ist es notwendig, den String zuerst in seine Bestandteile in UTF-8 zu konvertieren und dann die Bytes zu kodieren.

Die einfachste Lösung besteht darin, TextEncoder und TextDecoder zu verwenden, um zwischen UTF-8 und einbyteigen Darstellungen des Strings zu konvertieren:

function base64ToBytes(base64) {
  const binString = atob(base64);
  return Uint8Array.from(binString, (m) => m.codePointAt(0));
}

function bytesToBase64(bytes) {
  const binString = Array.from(bytes, (byte) =>
    String.fromCodePoint(byte),
  ).join("");
  return btoa(binString);
}

// Usage
bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE"
new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄"

Die Funktionen bytesToBase64 und base64ToBytes aus dem vorherigen Abschnitt können direkt genutzt werden, um zwischen Base64-Strings und Uint8Arrays zu konvertieren.

Für eine bessere Leistung ist eine asynchrone Konvertierung zwischen base64-Daten-URLs nativ innerhalb der Webplattform über die FileReader und fetch APIs möglich:

async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") {
  return await new Promise((resolve, reject) => {
    const reader = Object.assign(new FileReader(), {
      onload: () => resolve(reader.result),
      onerror: () => reject(reader.error),
    });
    reader.readAsDataURL(new File([bytes], "", { type }));
  });
}

async function dataUrlToBytes(dataUrl) {
  const res = await fetch(dataUrl);
  return new Uint8Array(await res.arrayBuffer());
}

// Usage
await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC"
await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2]

• Ein Polyfill von btoa ist in core-js verfügbar
• data URLs
• WorkerGlobalScope.btoa(): dieselbe Methode, jedoch in Worker-Kontexten.
• Window.atob()
• Uint8Array.prototype.toBase64()
• Base64