Как преобразовать Object URL в Blob или File в JavaScript

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

Для того чтобы получить Blob из object URL посредством API fetch, следует использовать следующую конструкцию:

const getBlob = async (url) => await (await fetch(url)).blob();

Для получения Blob вызовите функцию getBlob('object_url'), заменив 'object_url' на ваш object URL. Этот подход рекомендуется для использования в современном JavaScript, так как он прост, эффективен и последователен.

Работа со стандартными URL и object URL

Преобразование object URL или стандартного URL в Blob осуществляется одним и тем же способом. Вот пример кода, который демонстрирует использование API fetch для этих целей:

const url = 'path_to_your_resource'; // Или 'object_url'
fetch(url)
  .then(response => response.ok ? response.blob() : Promise.reject(new Error('Ошибка при запросе')))
  .then(blob => {
    // Здесь добавьте логику обработки blob
  })
  .catch(error => console.error('Ошибка при выполнении fetch:', error));

В этом примере учтено не только преобразование URL в Blob, но и обработка возможных ошибок при выполнении запроса.

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

Object URL — это ключ (🔑), открывающий доступ к сейфу (🔒), где хранится требуемый файл или Blob:

Object URL (🔑): "blob:http://example.com/12345"

Сейф (🔒): Внутри – файл или Blob 🧾

Чтобы открыть сейф, необходимо выполнить следующие действия:

1. Выполняем `fetch` с нашим ключом (🔑)
2. Сейф (🔒) открывается, предоставляя объект `Response`
3. Извлекаем нужный нам Blob (🧾)

Пример выполнения операции:

fetch("blob:http://example.com/12345") // Ключ для доступа
  .then(response => response.blob()) // Открываем сейф
  .then(blob => { 
    // Полученный Blob готов к использованию
  });

Результат: Вы успешно извлекли Blob и он теперь готов к дальнейшим операциям! 🎖️🕵️‍♀️

Продвинутые техники: работа с Blobs и URL

Альтернативный метод: XMLHttpRequest

Если вы работаете с JavaScript ES5 или требуется совместимость с более старыми браузерами, можно использовать XMLHttpRequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'object_url', true); // Делаем запрос
xhr.responseType = 'blob'; // Указываем, что ожидаем Blob

xhr.onload = function() {
  if (this.status === 200) { // Если всё прошло успешно
    var blob = this.response;
    // Обрабатываем полученный blob
  }
};

xhr.send(); // Отправляем запрос

Не забывайте, что API fetch является более современной и предпочтительной альтернативой благодаря его преимуществам, включая работу с промисами (promises).

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

Освобождение object URL после использования

После использования object URL его следует освободить с помощью вызова метода URL.revokeObjectURL(url). Это важно, особенно если ваш код создаёт множество Blobs:

let objectURL = URL.createObjectURL(blob);
// Работаем с objectURL
URL.revokeObjectURL(objectURL); // Завершаем работу и освобождаем ресурсы

Вы также можете реализовать переопределение методов URL.createObjectURL и URL.revokeObjectURL для контроля над созданием и удалением Blob.

Скачивание Blob

Дополнительно можно воспользоваться способом, позволяющим пользователям скачивать файлы прямо из Blob:

const downloadBlob = (blob, filename) => {
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = filename;
  document.body.appendChild(link);
  link.click(); // Инициируем клик
  document.body.removeChild(link); // Удаляем ссылку после скачивания
  URL.revokeObjectURL(link.href); // И очищаем URL
};

// Пример использования
downloadBlob(blob, 'filename.txt');

Этот код создаёт временную ссылку на странице, инициирует скачивание файла и затем удаляет ссылку.

Использование FileReader для работы с Blobs

FileReader может оказаться полезным при работе с данными Blob. Например, чтение Blob и его преобразование в Data URL посредством FileReader осуществляется вот так:

const readBlobAsDataURL = (blob, callback) => {
  const reader = new FileReader();
  reader.onloadend = () => callback(reader.result);
  reader.readAsDataURL(blob); // Запускаем чтение Blob
};

Такой подход может пригодиться, когда требуется вставить изображения прямо на веб-страницу или передать данные строкой в API.

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

1. URL: createObjectURL() static method – Web APIs | MDN
2. HTML Стандарт
3. Blob createObjectURL download not working in Firefox (but works when debugging) – Stack Overflow
4. Blob
5. File API
6. GitHub – eligrey/Blob.js: An HTML5 Blob implementation