Перетворення зображення в Base64 за допомогою JavaScript

Перетворення зображення в рядок Base64 у JavaScript може бути надзвичайно корисним у багатьох сучасних сценаріях веб-розробки. Однією з найпоширеніших причин використання Base64 є надсилання даних зображення через API, де двійкові файли можуть не прийматися безпосередньо. Base64 також зручний, коли ви хочете відобразити попередній перегляд завантаженого зображення перед його надсиланням на сервер. Замість того, щоб завантажувати файл негайно, ви можете перетворити його в рядок Base64 та відобразити безпосередньо у браузері. Такий підхід допомагає покращити взаємодію з користувачем та створює більш інтерактивні інтерфейси.

JavaScript надає дуже зручний інструмент для цього завдання: API FileReader. За допомогою FileReader ви можете прочитати вміст файлу зображення, вибраного за допомогою елемента <input type="file" />, та перетворити його на рядок, закодований у Base64. Після завершення конвертації ви можете використовувати отриманий рядок будь-де — вбудовувати його в JSON, надсилати через AJAX або відображати як попередній перегляд зображення. Це особливо популярно у випадках, коли вам потрібно перевірити або обробити зображення перед завантаженням.

Перед конвертацією зображення часто корисно перевірити його розмір. Великі файли можуть уповільнити процес конвертації, вплинути на продуктивність і навіть спричинити проблеми з пам’яттю браузера. У прикладі, який буде додано до цієї статті, ми включимо перевірку розміру файлу з обмеженням близько 9 МБ. Цей поріг можна легко налаштувати залежно від потреб вашого проекту. Ви можете збільшити його, зменшити або повністю видалити перевірку, якщо розмір файлу не є проблемою.

HTML

<input type="file" 
       accept="image/png, image/jpeg" 
       id="field"
       />
<div id="imgbox"></div>

JavaScript

const imgField = document.getElementById('field');

function readFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();

    // set the limit to about 9 MB
    const maxFileSize = 9000000;

    if (file.size > maxFileSize) {
      reject('error size');
      return;
    }

    reader.addEventListener(
      'load',
       () => {
        resolve(reader.result);
      },
      false
    );

    reader.addEventListener(
      'error',
      () => {
        reject('something went wrong');
      },
      false
    );

    reader.readAsDataURL(file);
  });
}

imgField.addEventListener('change', (ev) => {
  
  const files = ev.target.files;
  
  if (files && files[0]) {
    
      readFile(files[0])
        .then((base64str) => {
            
          // do something with the string...
          const img = document.createElement('img');
          img.src = base64str;
          document.getElementById('imgbox').appendChild(img);
        })
        .catch((err) => {
          alert(err);
        });
  }
});

Хоча конвертація зображень у Base64 у JavaScript зазвичай проста, пам’ятайте, що рядки Base64 більші за оригінальні двійкові файли. Це нормально, оскільки Base64 додає приблизно на 33% більше даних. Через це використання Base64 для великих зображень або зберігання багатьох рядків Base64 у базах даних може бути неоптимальним. Однак для попереднього перегляду, тестування або простих запитів API це часто є найпростішим та найефективнішим варіантом.

Окрім конвертації на основі JavaScript, існує багато онлайн-сервісів, які дозволяють користувачам миттєво конвертувати зображення в Base64. Ці інструменти можуть бути корисними, коли вам потрібна швидка конвертація без написання коду. Наприклад, ви можете скористатися онлайн-сервісом StringUtils для конвертації зображення в Base64.

Загалом, конвертація зображень у Base64 за допомогою JavaScript забезпечує гнучкість, покращує взаємодію з користувачем та спрощує обробку даних у багатьох веб-додатках. Це практична техніка, яку повинен знати кожен веб-розробник, особливо коли йдеться про завантаження файлів або динамічну обробку зображень. Незалежно від того, чи працюєте ви з попереднім переглядом, завантаженням API чи тимчасовим сховищем, Base64 може бути цінним інструментом у вашому робочому процесі.

Ви можете побачити приклад коду, що працює на Codepen: https://codepen.io/igorrybalko/pen/MYyqYRW