Конвертировать BLOB-URL в обычный URL

Question

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

Я использую это как <img>"s src приписывать.

Answer 1

URL, который был создан из JavaScript Blob не может быть преобразован в "нормальный" URL.

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

Следовательно, в общем случае нет смысла преобразовывать Blob URL на "нормальный" 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 в том смысле, что ими можно делиться; они не являются специфичными для текущего браузера или сеанса.

Answer 2

Другой способ создать URL-адрес данных из URL-адреса BLOB-объекта - использовать canvas.

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)

Answer 3

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

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

Answer 4

Нашел здесь этот ответ и хотел сослаться на него, поскольку он выглядит намного чище, чем принятый ответ:

function blobToDataURL(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onload = function(e) {callback(e.target.result);}
  fileReader.readAsDataURL(blob);
}

Answer 5

Я очень опаздываю на вечеринку.

Если вы хотите загрузить контент, вы можете просто использовать fetch сейчас

      fetch(blobURL)
  .then(res => res.blob())
  .then(blob => /*do what you want with the blob here*/)

Answer 6

Вот решение:

              let blob = new Blob(chunks, { 'type' : 'video/mp4;' });
        let videoURL = window.URL.createObjectURL(blob);
        const blobF = await fetch(videoURL).then(res => res.blob())

Answer 7

Как говорилось в предыдущем ответе, невозможно декодировать его обратно в URL-адрес, даже если вы попытаетесь увидеть его на панели Chrome Devtools, URL-адрес все еще может быть закодирован как BLOB-объект.

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

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

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

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