css.in.ua
Підтримати

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() приймає лише рядки, в яких кожен символ представлений одним байтом. Це означає, що для рядків, що містять символи поза ASCII, потрібно спочатку виконати перетворення, наприклад, використовуючи encodeURIComponent() перед кодуванням в Base64.
Порада:

Хоча btoa() корисний для кодування даних, важливо розуміти, що Base64 не є механізмом шифрування. Використовуйте його для кодування, а не для захисту конфіденційності даних. Для безпеки даних краще використовувати справжні криптографічні методи.
Порада:

Для декодування рядків, закодованих за допомогою btoa(), використовуйте метод atob(). Наприклад, atob(btoa("Hello World")) поверне початковий рядок "Hello World". Це корисно для перевірки або обробки закодованих даних.

Синтаксис

btoa(stringToEncode)

Параметри

*stringToEncode

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

Return

string

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

Переглядачі

Переглядач

4

1

3

10.5

12
Переглядач

37

18

4

1
Переглядач

16.0.0

1.0

Приклади


У цьому прикладі є текстове поле, де можна ввести текст для кодування, кнопка "Кодувати в Base64" і відображення результату кодування. При натисканні на кнопку метод btoa() використовується для кодування введеного тексту у формат Base64, і результат виводиться на сторінці.

У цьому прикладі метод btoa() використовується для кодування рядка originalText у формат Base64. Результат кодування виводиться у консоль.

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

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

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

У цьому прикладі ми завантажуємо зображення з сервера, використовуючи об'єкт Image(), та після завантаження зображення використовуємо метод toDataURL() canvas для отримання зображення у форматі Base64. Результат виводиться у консоль і зображення додається на сторінку.

// Створюємо новий об'єкт зображення
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);

Спільнота

Зв'язок