Преобразование URL-адреса большого двоичного объекта в обычный URL-адрес

Моя страница генерирует URL-адрес, подобный этому: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Как я могу преобразовать его в обычный адрес?

Я использую его в качестве <img>«S srcатрибута.

URL-адрес, созданный с помощью JavaScript, Blobне может быть преобразован в «обычный» URL-адрес.

blob:URL не относится к данным на сервере существует, это относится к данным, ваш браузер в настоящее время имеет в памяти, для текущей страницы. Он не будет доступен на других страницах, он не будет доступен в других браузерах и не будет доступен с других компьютеров.

Следовательно, в общем случае не имеет смысла преобразовывать BlobURL-адрес в «обычный» URL. Если вам нужен обычный URL-адрес, вам нужно будет отправить данные из браузера на сервер, и сервер сделает их доступными как обычный файл.

Можно преобразовать blob:URL в data:URL, по крайней мере, в Chrome. Вы можете использовать запрос AJAX для «извлечения» данных из blob:URL-адреса (хотя на самом деле он просто извлекает их из памяти вашего браузера, а не делает HTTP-запрос).

Вот пример:

var blob = new Blob(["Hello, world!"], { type: 'text/plain' });
var blobUrl = URL.createObjectURL(blob);

var xhr = new XMLHttpRequest;
xhr.responseType = 'blob';

xhr.onload = function() {
   var recoveredBlob = xhr.response;

   var reader = new FileReader;

   reader.onload = function() {
     var blobAsDataUrl = reader.result;
     window.location = blobAsDataUrl;
   };

   reader.readAsDataURL(recoveredBlob);
};

xhr.open('GET', blobUrl);
xhr.send();

data:URL-адреса, вероятно, не то, что вы подразумеваете под «нормальным», и могут быть проблемно большими. Однако они работают как обычные URL-адреса в том смысле, что ими можно делиться; они не относятся к текущему браузеру или сеансу.

другой способ создать URL-адрес данных из URL-адреса большого двоичного объекта может использовать холст.

var canvas = document.createElement("canvas")
var context = canvas.getContext("2d")
context.drawImage(img, 0, 0) // i assume that img.src is your blob url
var dataurl = canvas.toDataURL("your prefer type", your prefer quality)

Как и то, что я видел в mdn, canvas.toDataURL хорошо поддерживается браузерами. (кроме ie <9, всегда ie <9)

Для тех, кто пришел сюда в поисках способа загрузить видео / аудио с URL-адресом blob, этот ответ сработал для меня. Короче говоря, вам нужно будет найти файл * .m3u8 на желаемой веб-странице через вкладку Chrome -> Network и вставить его в проигрыватель VLC .

В другом руководстве показано, как сохранить поток с помощью VLC Player .

Как было сказано в предыдущем ответе, нет способа декодировать его обратно в URL-адрес, даже когда вы пытаетесь увидеть его с панели chrome devtools, URL-адрес все еще может быть закодирован как blob.

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

<a href="blob:http://example.com/xxxx-xxxx-xxxx-xxxx" download>download</a>

Вставьте это на страницу, содержащую URL-адрес blob, и нажмите кнопку, вы получите контент.

Другой способ - перехватить вызов ajax через прокси-сервер, после чего вы сможете просмотреть истинный URL-адрес изображения.