Window: btoa() Methode

stringToEncode

Der zu kodierende Binärstring.

Ein ASCII-String, der 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 weitere Details.

Base64 erwartet von seiner Konstruktion her Binärdaten als Eingabe. Im Kontext von JavaScript-Strings bedeutet dies 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 beanspruchen, erhalten Sie einen Fehler, da dies nicht als Binärdaten betrachtet 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 Eingabe-Strings als Bytewerte interpretiert, verursacht der Aufruf von btoa bei einem String eine "Character Out Of Range"-Ausnahme, 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 bestandteiligen Bytes in UTF-8 zu konvertieren und dann die Bytes zu kodieren.

Die einfachste Lösung ist die Verwendung von TextEncoder und TextDecoder, 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 bytesToBase64 und base64ToBytes Funktionen im vorherigen Abschnitt können direkt verwendet 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 für btoa ist in core-js verfügbar.
• data URLs
• WorkerGlobalScope.btoa(): dieselbe Methode, aber in Worker-Kontexten.
• Window.atob()
• Uint8Array.prototype.toBase64()
• Base64