Получить профессию в Skypro
Преобразование base64 в Blob в JavaScript: эффективные методы
Пройдите тест, узнайте какой профессии подходите
Быстрый ответ
Для преобразования base64-строки в Blob необходимо использовать функцию atob для получения бинарных данных и создать Blob с указанным типом контента. Приведенный ниже код иллюстрирует это:
let b64Data = 'base64String'; // Закодированная в base64 рок-н-ролл мелодия
let contentType = 'yourContentType'; // Например, 'image/png'
let byteCharacters = atob(b64Data);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += 512) {
let slice = byteCharacters.slice(offset, offset + 512);
byteArrays.push(new Uint8Array([...slice].map(char => char.charCodeAt(0))));
}
let blob = new Blob(byteArrays, {type: contentType});Обратите внимание, что маленькие порции данных используются для создания массива, что значительно повышает производительность.
Работа с большими данными: советы и трюки
Встречайте мощный fetch API
Для работы с большими base64-строками удобно использовать fetch API. Он возвращает Promise, который выполняется в ответ на запрос.
let b64Data = 'yourSuperLargeBase64Data'; // Возможно, это сценарий нового фильма о супергероях
let contentType = 'yourContentType'; // Выберите подходящий тип контента
fetch(`data:${contentType};base64,${b64Data}`)
.then(res => res.blob())
.then(blob => {
// Мир спасен, Blob получен!
});Функция b64toBlob для ежедневного спасения мира
Создайте функцию b64toBlob для упрощения повторяющихся операций:
function b64toBlob(b64Data, contentType = '', sliceSize = 512) {
let byteCharacters = atob(b64Data);
let byteArrays = [];
for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
const slice = byteCharacters.slice(offset, offset + sliceSize);
const byteNumbers = slice.split('').map(char => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, {type: contentType});
}Такой подход повышает эффективность кодирования.
Canvas toBlob
Для работы с большими изображениями рекомендуется использовать canvas.toBlob, так как он быстрее и требует меньше памяти, чем canvas.toDataURL.
let canvas = document.createElement('canvas');
// Ваши мечты о создании картины на виртуальном холсте становятся реальностью
canvas.toBlob(blob => {
// И вот ваше первое цифровое полотно готово к использованию
}, 'image/png');Когда речь идёт не только о base64: дополнительные нюансы и соображения
FormData — ваш надежный помощник
Для загрузки файлов рекомендуется использовать FormData. Он позволяет отправлять файлы без преобразования их в base64:
let formData = new FormData();
formData.append('file', blob, 'filename');Теперь вы обрабатываете файлы как настоящий профессионал!
Blob URL: создание и уничтожение
Не забывайте отзывать Blob URL командой URL.revokeObjectURL() после их использования.
let blobUrl = URL.createObjectURL(blob);
let downloadLink = document.createElement('a');
downloadLink.href = blobUrl;
downloadLink.download = 'filename';
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
URL.revokeObjectURL(blobUrl);Такое поведение способствует оптимальному использованию памяти.
Избегание блокировки интерфейса
Для обработки больших данных без блокировки интерфейса используйте Web Workers или Async/Await. Это обеспечивает отзывчивое поведение UI.
Оптимизация кода для надежности и эффективности
Важность типа содержимого
Всегда указывайте правильный MIME-тип при создании Blob:
let blob = new Blob([myData], {type: 'data/toTheMoon'});Совместимость с браузерами
Обеспечьте совместимость вашего кода с различными браузерами, особенно когда используете API fetch и возможности Blob.
Визуализация
Представьте base64-строку как головоломку. После декодировки вы получаете набор байтов и завершаете процесс созданием объекта Blob:
let byteCharacters = atob("YmFzZTY0IGRhdGE=");
let byteArrays = [];
for(let i = 0; i < byteCharacters.length; i++) {
byteArrays.push(byteCharacters.charCodeAt(i));
}
let blob = new Blob([new Uint8Array(byteArrays)], {type: 'application/octet-stream'});Blob: 🗿 (Результат ваших усилий)