Перетворити BLOB-адресу на звичайну 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-адреси BLOB може бути використання полотна.

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 добре підтримується браузерами. (крім тобто <9, завжди тобто <9)

Для тих, хто прийшов сюди, шукаючи спосіб завантажити відео / аудіо з великою кількістю відео, ця відповідь спрацювала для мене. Коротше кажучи, вам потрібно буде знайти файл * .m3u8 на потрібній веб-сторінці через Chrome -> вкладка Мережа та вставити його у програвач 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-адресу зображення.