btoa() в JavaScript — кодування рядка в Base64

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

Функція 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	10

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

Переглядач
	4.4	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);

<header>
  <h2 class="title">btoa() метод</h2>
  <p class="description">Метод <code>btoa()</code> використовується для кодування текстового рядка у формат Base64.</p>
</header>
<main>
  <div class="result">
    <textarea id="textInput" placeholder="Введіть текст для кодування"></textarea>
    <button id="encodeButton">Кодувати в Base64</button>
    <p>Результат кодування: <span id="encodedResult"></span></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  padding: 10px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

p {
  margin-top: 10px;
}

span {
  font-weight: bold;
}

document.addEventListener('DOMContentLoaded', function () {
  const textInput = document.getElementById('textInput');
  const encodeButton = document.getElementById('encodeButton');
  const encodedResult = document.getElementById('encodedResult');

  encodeButton.addEventListener('click', function () {
    const originalText = textInput.value;
    const encodedText = btoa(originalText);
    encodedResult.textContent = encodedText;
  });
});
//# sourceURL=pen.js

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