Окно: метод btoa()

Метод btoa() интерфейса Window создаёт строку Base64-кодированной ASCII из бинарной строки (т.е., строки, в которой каждый символ обрабатывается как байт двоичных данных).

Этот метод можно использовать для кодирования данных, которые могут вызвать проблемы с коммуникацией, передать их, а затем использовать метод Window.atob() для их декодирования. Например, можно кодировать управляющие символы, такие как ASCII-значения от 0 до 31.

Также рассмотрите использование метода Uint8Array.prototype.toBase64(), если ваши данные находятся в объекте Uint8Array, чтобы избежать создания строки, содержащей сырые байты.

stringToEncode

Бинарная строка для кодирования.

Строка ASCII, содержащая Base64-представление stringToEncode.

InvalidCharacterError DOMException

В строке был символ, который не помещался в один байт. Более подробную информацию см. в разделе «Строки Unicode» ниже.

По своей сути, Base64 ожидает двоичные данные в качестве входных. С точки зрения строк JavaScript, это означает строки, в которых кодовый символ каждого символа занимает только один байт. Поэтому, если вы передадите строку в btoa(), содержащую символы, занимающие более одного байта, вы получите ошибку, поскольку это не считается двоичными данными:

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

Поскольку btoa интерпретирует кодовые точки входной строки как значения байтов, вызов btoa для строки вызовет исключение «Символ за пределами диапазона», если кодовый символ символа превышает 0xff. Для случаев использования, когда вам нужно закодировать произвольный текст Unicode, необходимо сначала преобразовать строку в составляющие её байты в UTF-8, а затем закодировать байты.

Простейшим решением является использование TextEncoder и TextDecoder для преобразования между UTF-8 и однобайтовыми представлениями строки:

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 Ā 𐀀 文 🦄"

Функции bytesToBase64 и base64ToBytes в предыдущем разделе могут быть использованы напрямую для преобразования между Base64-строками и Uint8Array.

Для повышения производительности возможно асинхронное преобразование данных в формате base64 URL напрямую в веб-платформе с помощью API FileReader и fetch:

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]

• Полифил btoa доступен в core-js
• data URL
• WorkerGlobalScope.btoa(): тот же метод, но в рабочих контекстах.
• Window.atob()
• Uint8Array.prototype.toBase64()
• Base64