Window: btoa() Methode

stringToEncode

Der zu kodierende Binärstring. Strings in JavaScript sind als UTF-16 kodiert, das bedeutet, dass jedes Zeichen einen Codepunkt kleiner als 256 haben muss, der ein Byte Daten darstellt.

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-Zeichenketten" weiter unten für mehr Details.

Base64 erwartet von seinem Design her Binärdaten als Eingabe. Im Hinblick auf JavaScript-Strings bedeutet dies Strings, bei denen der Codepunkt jedes Zeichens nur ein Byte belegt. Wenn Sie 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 Eingabestrings als Byte-Werte interpretiert, führt ein Aufruf von btoa bei einem String zu einer "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 Bestandteile in UTF-8 umzuwandeln und dann die Bytes zu kodieren.

Die einfachste Lösung ist die Verwendung von TextEncoder und TextDecoder, um zwischen UTF-8 und Ein-Byte-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 im vorhergehenden Abschnitt können direkt verwendet werden, um zwischen Base64-Strings und Uint8Arrays zu konvertieren.

Für eine bessere Leistung ist 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(): die gleiche Methode, aber in Worker-Kontexten.
• Window.atob()
• Uint8Array.prototype.toBase64()
• Base64