JS метод Object.btoa()

Загальний опис

Функція btoa() є глобальною функцією, призначеною для кодування даних у рядок, використовуючи кодування Base64. Цей метод приймає рядок як вхідний аргумент і повертає його відповідник, закодований у форматі Base64. Важливо зазначити, що btoa() призначена для роботи з текстовими даними і може призводити до помилок або некоректної поведінки при спробі кодувати бінарні дані.

Кодування у Base64 часто використовується для перетворення даних, які потребують відправлення через мережеві протоколи або включення в URL, оскільки це кодування перетворює двійкові дані на ASCII-рядок. Це корисно, наприклад, при передачі даних, які можуть містити символи, що мають спеціальне значення в URL.

Ось простий приклад використання btoa():

let string = 'Hello World!';
let encodedString = btoa(string);
console.log(encodedString); // Виводить: SGVsbG8gV29ybGQh

У цьому прикладі вхідний рядок Hello World! перетворюється на рядок, закодований у форматі Base64.

Для більш складних сценаріїв, таких як кодування даних, що містять символи не з ASCII, використання btoa() може вимагати додаткових кроків, наприклад, перетворення рядка у формат UTF-8 перед кодуванням. Наприклад:

function utf8ToB64(str) {
    return btoa(unescape(encodeURIComponent(str)));
}

let string = 'Привіт Світ!';
let encodedString = utf8ToB64(string);
console.log(encodedString); // Виводить закодований рядок у форматі Base64

У цьому прикладі спочатку рядок перетворюється у формат UTF-8 за допомогою encodeURIComponent(), а потім перетворюється з escape перед кодуванням у Base64.

btoa() також може застосовуватися для кодування даних, які будуть включені в HTML-документи або CSS, наприклад, для вставки зображень у форматі Base64 безпосередньо у CSS-стилі або HTML-розмітку:

let imageData = 'data:image/png;base64,iVBORw0KGgo...';
let css = `background-image: url("${imageData}");`;

У цьому випадку зображення, закодоване у форматі Base64, вставляється безпосередньо у CSS.

На завершення, важливо пам'ятати, що, хоча кодування Base64 є корисним для безпечної передачі та вбудовування даних, воно не є методом шифрування і не повинно використовуватися як таке. Кодування Base64 збільшує розмір даних приблизно на 33%, тому слід слід використовувати його обережно, особливо при передачі великих об'ємів даних, щоб уникнути непотрібного збільшення трафіку мережі. Крім того, варто звернути увагу на обмеження розміру URL в різних браузерах при включенні довгих рядків, закодованих у Base64, у веб-запити.

Синтаксис

btoa(stringToEncode)

Параметри

*stringToEncode

Рядок у форматі двійкового коду для кодування.

Return

string

Повертає рядок ASCII, який містить представлення Base64 для рядка, що був закодований у методі stringToEncode.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі
• Серверні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Оригінальний текст, який ми хочемо закодувати
const originalText = "Привіт, це приклад використання методу btoa()";

// Використовуємо метод btoa() для кодування тексту у формат Base64
const encodedText = btoa(originalText);

console.log("Закодований текст у форматі Base64:", encodedText);

// Створюємо новий об'єкт зображення
const image = new Image();

// Встановлюємо шлях до зображення на сервері
image.src = "url_до_зображення.jpg";

// Обробляємо подію завантаження зображення
image.onload = function () {
  // Створюємо об'єкт canvas для роботи з зображенням
  const canvas = document.createElement("canvas");
  canvas.width = image.width;
  canvas.height = image.height;

  // Отримуємо контекст canvas
  const ctx = canvas.getContext("2d");

  // Відображаємо зображення на canvas
  ctx.drawImage(image, 0, 0, image.width, image.height);

  // Отримуємо дані зображення у форматі Base64
  const imageData = canvas.toDataURL("image/jpeg");

  // Виводимо дані у форматі Base64
  console.log("Зображення у форматі Base64:", imageData);
};

// Додаємо зображення на сторінку
document.body.appendChild(image);