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


96

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

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


1
даже после расшифровки URL-адреса это все еще localhostссылка. Вместо этого найдите его публичную ссылку. (какой CDN вы используете?)
Raptor

Я хочу использовать javascript.
Джейкоб

Используйте ссылку stackvoverflow .. и W3C. Ваша настоящая проблема будет заключаться в том, как сделать ее независимой от среды, в которой вы развертываете свой код
user1428716

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

Ответы:


167

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-адреса в том смысле, что ими можно делиться; они не относятся к текущему браузеру или сеансу.


14
Если URL-адреса blob-объектов не указывают на данные сервера, то почему URL-адрес src видео Youtube выглядит так: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (в Chrome)
bhh1988 03

5
@ bhh1988 Это очень интересная находка. Я не уверен, что там происходит. Если я попытаюсь получить URL-адрес их src blob-объекта с помощью XMLHttpRequest, как описано в этом сообщении, содержимое не будет возвращено. Я предполагаю, что либо (а) они сгенерировали любой пустой URL-адрес Blob для использования в качестве заполнителя при подаче данных из другого источника, либо (б) Blob каким-то образом действует как прокси для зашифрованных данных (через HTML5 Encrypted Media Extensions). Однако я не уверен, как это можно сделать на практике.
Джереми

19
@ bhh1988 Похоже, что спецификация расширений источника мультимедиа позволяет создавать URL-адреса больших двоичных объектов для мультимедийных потоков, управляемых с помощью JavaScript. Они не соответствуют статическим данным, таким как URL-адреса blob, обсуждаемые в этом сообщении, отсюда и различие в поведении, но они по-прежнему относятся к локальной информации, а не напрямую к данным на сервере.
Джереми

1
Хм, звучит правильно. Это сбивает с толку, потому что URL-адрес выглядит реальным и интересным, но если это просто заполнитель, значение src не имеет значения.
bhh1988

3
Я получаю Not allowed to navigate top frame to data URL: data:text/plain;base64,...ошибку Я получаю данные, но window.locationэто не разрешено ...
loretoparisi

15

другой способ создать 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)


17
Обратите внимание, что это, конечно, относится только к данным изображения, и некоторые метаданные могут быть потеряны!
minmaxavg

1
При этом создается ссылка, но если вы перейдете по ней, вы получите только черный ящик.
Antfish

@Antfish, этого не должно быть, не так ли?
Pacerier 06

5

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

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


-4

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

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

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

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

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


<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> загрузить </a>. Он должен работать. Когда он попадет в href, он переименует blob в abc.txt и загрузит
P Satish Patro

2
Почему отрицательные голоса? ты действительно пробовал то, что я сказал?
ospider

Я не проголосовал против. Я пришел сюда. И я подумал, что это сработает. Я поддерживаю этот
P Satish Patro

Не уверен насчет голосов против, но это, безусловно, звучит просто. (С учетом сказанного, я всегда использую Failed - Network errorChrome 83.0.4103.97 в Linux.)
toraritte
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.