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

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

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

70 голосов | спросил Jacob 19 FebruaryEurope/MoscowbTue, 19 Feb 2013 11:29:49 +0400000000amTue, 19 Feb 2013 11:29:49 +040013 2013, 11:29:49

3 ответа


0

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

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

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

Можно преобразовать URL blob: в data: URL, по крайней мере, в Chrome. Вы можете использовать AJAX-запрос для «извлечения» данных из URL blob: (даже если он на самом деле просто извлекает их из памяти вашего браузера , не делая 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 в том смысле, что ими можно делиться; они не относятся к текущему браузеру или сеансу.

ответил Jeremy Banks 24 AMpWed, 24 Apr 2013 01:57:31 +040057Wednesday 2013, 01:57:31
0

другим способом создания 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)

ответил Leooonard 23 J000000Thursday15 2015, 10:44:16
0

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

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

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

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

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

ответил ospider 12 Mayam18 2018, 09:08:15

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132