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.

автор: Bond правити

Порада

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

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

btoa(stringToEncode)

Параметри

stringToEncode

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

автор: Bond

правити

Повернення

string

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

автор: Bond

правити

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
	4	1	3	10.5	12

Підтримка: мобільні переглядачі

Переглядач
	37	18	4	1

Підтримка: серверні переглядачі

Переглядач
	16.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

const originalText = 'Привіт, це приклад використання btoa()';

// btoa() розуміє лише латинку-1: на кирилиці кидає помилку
try {
    btoa(originalText);
} catch (error) {
    console.log('Напряму не вийшло:', error.name);
}

// правильний шлях для юнікоду: спершу — байти UTF-8
const bytes = new TextEncoder().encode(originalText);
const binString = Array.from(bytes, b => String.fromCodePoint(b)).join('');
const encoded = btoa(binString);

console.log('Base64:', encoded);

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