URL.createObjectURL: примеры (JAVASCRIPT)

Короткие примеры использования

Пример 1: Создание URL для объекта Blob с текстом.

const textBlob = new Blob(['Пример текста'], { type: 'text/plain' });
const blobUrl = URL.createObjectURL(textBlob);
console.log(blobUrl);

blob:https://example.com/550e8400-e29b-41d4-a716-446655440000

Пример 2: Создание URL для файла из элемента input.

// Предположим, что в input выбран файл image.jpg
document.getElementById('fileInput').addEventListener('change', function(event) {
  const file = event.target.files[0];
  const fileUrl = URL.createObjectURL(file);
  console.log(fileUrl);
});

blob:https://example.com/550e8400-e29b-41d4-a716-446655440001

Пример 3: Использование URL для отображения изображения.

const imgBlob = new Blob([binaryImageData], { type: 'image/jpeg' });
const imgUrl = URL.createObjectURL(imgBlob);
const imgElement = document.createElement('img');
imgElement.src = imgUrl;
document.body.appendChild(imgElement);
// После использования следует освободить URL
// URL.revokeObjectURL(imgUrl);

Результат: изображение отображается на странице.

Похожие функции в JavaScript

В JavaScript существуют альтернативные методы для работы с бинарными данными:

• FileReader.readAsDataURL(): Читает содержимое объекта Blob или File и возвращает данные в формате base64-кодированной строки (data: URL). Этот метод асинхронный и лучше подходит для небольших файлов, которые необходимо встроить непосредственно в документ.
• Response.blob() в Fetch API: Позволяет получить бинарные данные из сетевого запроса как Blob объект, который затем можно использовать с createObjectURL. Это удобно для загрузки медиафайлов с сервера.
• HTMLMediaElement.srcObject: Прямое присвоение объекта MediaStream для воспроизведения видео или аудио без создания промежуточного URL. Используется с WebRTC и Media Capture API.

Выбор метода зависит от задачи: createObjectURL эффективен для быстрого создания ссылок на большие объекты в памяти, в то время как readAsDataURL подходит для небольших данных, которые нужны сразу в виде строки.

Аналоги в других языках программирования

В других языках программирования существуют свои подходы для работы с временными ссылками на данные:

Python (Flask пример):

from flask import send_file
from io import BytesIO

@app.route('/get_file')
def get_file():
    binary_data = b'file content'
    return send_file(BytesIO(binary_data), mimetype='text/plain')

Этот код отправляет бинарные данные как файл, но не создает постоянный URL в памяти. В отличие от JavaScript, серверные языки обычно обслуживают файлы через маршруты.

PHP:

// Генерация data URL для изображения
$image_data = file_get_contents('image.jpg');
$base64 = base64_encode($image_data);
$data_url = 'data:image/jpeg;base64,' . $base64;
echo '<img src="' . $data_url . '">';

PHP часто использует base64 кодирование для встраивания небольших файлов, что аналогично FileReader.readAsDataURL в JavaScript. Создание временных файлов на диске с уникальными именами является более распространенной практикой для больших данных.

В языках, таких как C или C++, работа с временными файлами или памятью требует ручного управления, и нет прямой аналогии браузерному createObjectURL.

Типичные ошибки

1. Неосвобождение URL, приводящее к утечкам памяти.

const blob = new Blob(['data']);
const url = URL.createObjectURL(blob);
// Если url не освободить, память не очистится

Решение: вызывать URL.revokeObjectURL(url), когда URL больше не нужен.

2. Попытка использовать URL после его освобождения.

const url = URL.createObjectURL(someBlob);
URL.revokeObjectURL(url);
document.getElementById('myImage').src = url; // Ошибка: URL недействителен

Это приведет к тому, что элемент не сможет загрузить ресурс.

3. Передача неподдерживаемого типа объекта.

const obj = { key: 'value' };
const url = URL.createObjectURL(obj); // TypeError

TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Изменения в последних версиях

Спецификация метода претерпела изменения. Раньше метод был частью глобального объекта (window.URL или window.webkitURL), но теперь является статическим методом конструктора URL.

Поддержка объекта MediaSource в качестве аргумента была добавлена позже для работы с расширенными медиа возможностями, такими как потоковое видео.

В современных браузерах метод стандартизирован и не требует префиксов. Устаревший метод URL.revokeObjectURL также был частью этих изменений.

Расширенные примеры

Пример 1: Создание и скачивание файла на лету.

const jsonData = JSON.stringify({ name: 'Иван', age: 30 });
const blob = new Blob([jsonData], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'data.json';
a.click();
setTimeout(() => URL.revokeObjectURL(url), 100);

Результат: автоматическое скачивание файла data.json.

Пример 2: Воспроизведение аудио из бинарных данных, полученных по сети.

fetch('audio.mp3')
  .then(response => response.blob())
  .then(blob => {
    const audioUrl = URL.createObjectURL(blob);
    const audio = new Audio(audioUrl);
    audio.play();
    audio.onended = () => URL.revokeObjectURL(audioUrl);
  });

Результат: воспроизведение аудио с последующим освобождением URL.

Пример 3: Отображение PDF с помощью iframe.

const pdfBlob = new Blob([pdfData], { type: 'application/pdf' });
const pdfUrl = URL.createObjectURL(pdfBlob);
const iframe = document.createElement('iframe');
iframe.src = pdfUrl;
document.body.appendChild(iframe);
iframe.onload = () => URL.revokeObjectURL(pdfUrl); // Освобождение после загрузки

Пример 4: Работа с кадром из видео (из Canvas).

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Нарисовать что-то на canvas
canvas.toBlob(function(blob) {
  const imgUrl = URL.createObjectURL(blob);
  const newImg = document.createElement('img');
  newImg.src = imgUrl;
  document.body.appendChild(newImg);
  URL.revokeObjectURL(imgUrl);
}, 'image/png');