Конвертирование DataUrl в Blob в JavaScript
В этой статье мы рассмотрим, как можно преобразовать строку Data URL в объект Blob с использованием JavaScript. Data URL используется для кодирования файлов и других данных прямо в строку, часто в формате Base64. Однако для дальнейшей обработки, особенно для загрузки файлов, нужно преобразовать эту строку обратно в бинарные данные, что и позволяет сделать функция dataURLToBlob.
Функция dataURLToBlob: пошаговый разбор
function dataURLToBlob(dataURL, filename) {
// Разделяем строку dataURL на две части: тип содержимого (MIME) и данные в base64
const parts = dataURL.split(',');
const mimeType = parts[0].match(/:(.*?);/)[1]; // Извлекаем MIME-тип из первой части строки
const base64Data = parts[1]; // Вторая часть — это закодированные в base64 данные
// Декодируем строку base64 в двоичные данные
const byteString = atob(base64Data); // atob() декодирует base64 в исходные бинарные данные
const byteArray = new Uint8Array(byteString.length); // Создаем массив 8-битных целых чисел для хранения данных
// Проходим по каждому символу декодированной строки и преобразуем его в числовое значение (байт)
for (let i = 0; i < byteString.length; i++) {
byteArray[i] = byteString.charCodeAt(i); // Преобразуем каждый символ в код ASCII
}
// Создаем и возвращаем объект Blob (или File для лучшей совместимости с файловыми API)
return new File([byteArray], filename, { type: mimeType });
}
Подробное объяснение:
- Разделение Data URL на компоненты:
const parts = dataURL.split(',');Data URL состоит из двух основных частей:
const mimeType = parts[0].match(/:(.*?);/)[1];
const base64Data = parts[1]; - MIME-тип (например, image/png), который указывает, что за тип данных содержится в строке.
- Данные в формате base64, которые представляют собой закодированные бинарные данные.
С помощью метода split(',') мы разделяем строку на две части: первая содержит информацию о MIME-типе, вторая — собственно данные.
Пример строки Data URL:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...
Извлекаем MIME-тип с помощью регулярного выражения:
const mimeType = parts[0].match(/:(.*?);/)[1];
- Декодирование base64 данных:
const byteString = atob(base64Data);Метод atob() декодирует строку base64 обратно в двоичную строку. Base64 — это способ представления бинарных данных в текстовом формате, что удобно для передачи через текстовые протоколы, такие как HTML или JSON.
После декодирования byteString содержит исходные двоичные данные, но в виде строки.
-
Создание массива байтов:
const byteArray = new Uint8Array(byteString.length);Мы создаём TypedArray Uint8Array, который позволяет хранить данные в виде массива 8-битных (однобайтовых) целых чисел. Это необходимо для того, чтобы Blob смог корректно обрабатывать бинарные данные. -
Заполнение массива двоичными данными:
for (let i = 0; i < byteString.length; i++) {Мы проходим по каждому символу декодированной строки и используем метод charCodeAt(), чтобы получить числовое значение (ASCII-код) для каждого символа. Это значение помещается в соответствующую ячейку массива Uint8Array.
byteArray[i] = byteString.charCodeAt(i);
}
Этот шаг конвертирует строку в последовательность байтов, которые можно использовать для создания бинарных данных.
- Создание объекта Blob:
return new File([byteArray], filename, { type: mimeType });В завершение мы создаём объект File (наследник Blob) с помощью конструктора File(). Мы передаем массив байтов, имя файла, и MIME-тип.
Использование File() вместо Blob() удобно, когда требуется работать с API, которые ожидают объект типа файла, например, при загрузке файлов через формы.
Пример использования:
Предположим, у вас есть изображение в формате base64, и вы хотите превратить его в файл для последующей загрузки:
const dataURL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA...';
const filename = 'image.png';
const file = dataURLToBlob(dataURL, filename);
// Теперь можно использовать этот объект File для загрузки
console.log(file); // Выводит объект File, который можно отправить на сервер
Преимущества использования Blob и File
- Обработка файлов на клиенте: JavaScript позволяет работать с файлами прямо на стороне клиента без необходимости отправлять их на сервер.
- Создание и управление файлами: С помощью Blob можно динамически генерировать файлы, которые пользователь может скачать или загрузить на сервер.
- Совместимость с File API: Объекты File и Blob легко интегрируются с API браузеров, позволяя работать с файлами в формах, запросах или сохранять данные локально.
Функция dataURLToBlob является мощным инструментом для преобразования данных, закодированных в формате Data URL, в бинарные объекты Blob или File. Она пригодиться при работе с файлами в веб-приложениях, где нужно загрузить или сохранить данные, такие как изображения, документы или другие файлы.
Еще более продвинутые возможности языка JavaScript обсуждаются в моем видеокурсе Программирование на JavaScript с Нуля до Гуру 2.0.
-
Создано 02.10.2024 08:42:01
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.