Преобразование base64 строки в ArrayBuffer на JavaScript

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

Чтобы преобразовать строку формата base64 в ArrayBuffer, воспользуйтесь следующим кодом:

const b64ToBuffer = (b64) => Uint8Array.from(atob(b64), c => c.charCodeAt(0)).buffer;
const arrayBuffer = b64ToBuffer('ВашаBase64Строка'); // Подставьте вашу строку вместо 'ВашаBase64Строка'

Передав Base64 строку в функцию b64ToBuffer, вы получите искомый arrayBuffer.

Путь из base64 в ArrayBuffer

Преобразование из base64 в ArrayBuffer заключает в себе ряд нюансов и сложностей. Давайте подробнее рассмотрим этот процесс.

Роль браузеров

Функция atob() – это классический инструмент для декодирования base64 в бинарные строки, но работа напрямую с бинарными строками может быть не самым удобным решением. Использование Uint8Array преобразует процесс в более простую и удобную операцию с байтовыми данными, представленными в виде ArrayBuffer.

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

Обработка больших данных: значение размера

При работе с большими данными объект Blob и API FileReader обеспечивают асинхронную обработку:

function b64ToBlobAndBack(b64) {
  const blob = base64ToBlob(b64);
  return blobToArrayBuffer(blob);
}

Такой подход помогает предотвратить переполнение памяти (Out of Memory, OOM), которое может произойти при обработке крупногабаритных данных.

Оптимизация для Node.js

В среде Node.js функция Buffer.from() позволяет преобразовать base64 строку в буфер, эквивалентный ArrayBuffer:

const buffer = Buffer.from('ВашаBase64Строка', 'base64');

Стоит помнить, что все хорошо в меру, включая буферы.

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

Преобразование base64 строки в ArrayBuffer можно представить как процесс превращения клубка пряжи (🧶) в вязаный шарф (🧣):

Base64 строка (🧶): "dGhpcyBpcyBhIHRlc3Q="

Мы превращаем бинарные данные в текст:

let buffer = Uint8Array.from(atob(base64), c => c.charCodeAt(0)).buffer;

В результате мы получаем наш ArrayBuffer-шарф:

ArrayBuffer шарф (🧣): [116, 104, 105, 115, 32, 105, 115, 32, 97, 32, 116, 101, 115, 116]

Единороги и Unicode

Функции atob() и btoa() могут столкнуться с проблемами при работе с символами Unicode, используя кодировку UTF-16. Для обхода этой проблемы используются API TextEncoder и TextDecoder:

const b64ToBufferUnicode = (b64) => {
  const binary_string = window.atob(b64);
  const bytes = new Uint8Array(binary_string.length);
  for (let i = 0; i < binary_string.length; i++) {
    bytes[i] = binary_string.charCodeAt(i);
  }
  return new TextDecoder("utf-8").decode(bytes);
};

Таким образом, символы Unicode остаются неповрежденными и на месте!

Примеры использования

Большие бинарные данные и их обработка

Для обработки больших данных, таких как файлы или медиа, необходимы более мощные инструменты. Использование Fetch API вместе с асинхронностью – отличное решение:

async function fetchBase64AsArrayBuffer(base64) {
  const response = await fetch(`data:;base64,${base64}`);
  const buffer = await response.arrayBuffer();
  return buffer;
}

Такой подход становится неотъемлемой частью работы, когда сервер отправляет данные в формате base64, как будто будущее уже здесь.

Особенности в React Native

При разработке под React Native, глобальные функции, такие как atob и btoa, могут быть недоступны. В таком случае используются нативные модули для преобразования base64 в ArrayBuffer.

Конфиденциальность данных

Данные в формате base64 могут содержать конфиденциальную информацию. Всегда следите за безопасностью данных и не допускайте утечки ценной информации.

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

1. ArrayBuffer – JavaScript | MDN
2. Base64 – MDN Web Docs Glossary: Definitions of Web-related terms | MDN
3. atob() global function – Web APIs | MDN
4. Uint8Array – JavaScript | MDN
5. Преобразование строки base64 в ArrayBuffer – Stack Overflow
6. Создание Blob из строки base64 в JavaScript – Stack Overflow
7. UTF-8, типизированные массивы, Base64, Unicode и Вы