Конвертация Blob в Base64 с помощью JavaScript и JQuery

Быстрый ответ

Чтобы преобразовать Blob в Base64 на JavaScript, примените метод readAsDataURL объекта FileReader и непосредственно после срабатывания события onload извлеките Base64-строку из свойства result.

const toBase64 = blob => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onloadend = () => resolve(reader.result.split(',')[1]);
  reader.onerror = reject;
  reader.readAsDataURL(blob);
});

// Пример использования:
const blob = new Blob(['текст'], { type: 'text/plain' });
toBase64(blob).then(console.log); // Выводит Base64-строку в консоль

Глубокое погружение: разбор сложных случаев и граничных сценариев

Асинхронность и Promises

В JavaScript, обычно, обработка Blob происходит асинхронно. Мы обернули процесс преобразования в Promise для надежного управления асинхронными операциями. Обращаем внимание на событие onloadend, которое говорит о том, что Blob успешно прочитан.

async function convertBlobToBase64(blob) {
  const reader = new FileReader();
  const dataPromise = new Promise((resolve, reject) => {
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
  });
  reader.readAsDataURL(blob);
  return await dataPromise;
}

Эту функцию можно читать при помощи async/await или с использованием метода then(), для контроля над результатом операции.

Подробнее об этом расскажет наш спикер на видео

Обработка бинарных данных и UTF-8

Метод readAsDataURL автоматически справляется с кодировкой символов, что делает его особо полезным при работе с бинарными данными. По сравнению с функцией btoa, которая может неправильно обработать символы, состоящие из нескольких байтов, данный метод предпочтителен.

Преобразование в процессе загрузки

Fetch API позволяет эффективно интегрировать логику преобразования в Base64. Ниже – пример загрузки изображения и его последующего конвертирования:

(async () => {
  const response = await fetch('path/to/your/image.png');
  const blob = await response.blob();
  const base64 = await convertBlobToBase64(blob);
  console.log(base64);
})();

Визуализация

Blob – это кластер данных, предназначенный для передачи.

Blob (📦): [Нетронутые данные]

Мы преобразуем его в Base64:

const blobToBase64 = blob => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(blob);
});

В результате преобразования получим строку в формате Base64:

Base64 (✉️): [Закодированные данные, готовые к передаче]

Таким образом, данные становятся удобнее для передачи:

До: Blob (📦 – Объемные и труднопередаваемые) После: Base64 (✉️ – Компактные и удобные для передачи)

Продвинутые методы: хитрости, подводные камни и перспективы

Методы Response и btoa()

Есть и другие варианты! Можно использовать конструктор Response и функцию btoa(), однако, стоит помнить о потенциальных ограничениях:

async function blobToBase64(blob) {
  const data = await new Response(blob).text();
  return btoa(data);
}

Следите за обновлениями

Будьте в курсе последних API и нововведений в языке. JavaScript постоянно эволюционирует, и всегда могут появляться новые, более удобные методы.

Выбирайте правильный метод

Разные задачи требуют разных подходов к решению. Зная разные методы, вы станете универсальным инструментом для преобразования Blob в Base64.

Полезные материалы

1. FileReader: метод readAsDataURL() – Web APIs | MDN — Фундаментальное руководство по конвертации Blob в Base64.
2. Javascript: Convert base64 to Blob · GitHub — Разнообразные примеры кода для дополнительного изучения.
3. Чтение файлов на JavaScript | Статьи | web.dev — Обзор текущих API для работы с файлами.
4. Data URIs | CSS-Tricks — Понятная вводная по теме Data URIs.
5. Статья на Medium – JavaScript Blob from Base64 — Ценное чтение для понимания нюансов конвертации.