Przekonwertuj adres URL obiektu BLOB na normalny adres URL

97

Moja strona generuje taki adres URL: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Jak mogę przekonwertować go na normalny adres?

Używam go jako <img>„s srcatrybut.

Jakub
źródło
1
nawet po zdekodowaniu adresu URL nadal jest to localhostlink. Zamiast tego znajdź publiczny link. (którego CDN używasz?)
Raptor,
Chcę używać javascript.
Jacob
Użyj łącza stackvoverflow .. i W3C Twoim prawdziwym problemem będzie uniezależnienie go od środowiska, w którym wdrażasz swój kod
user1428716
Czy istnieje sposób, aby znaleźć publiczny adres URL z adresu blob? To jedyna wartość, jaką mam.
Jacob
Również superuser.com/q/948738/78897
Pacerier

Odpowiedzi:

168

Adres URL utworzony z kodu JavaScript Blobnie może zostać przekonwertowany na „normalny” adres URL.

blob:URL nie odnosi się do danych, istnieje na serwerze, to odnosi się do danych, które przeglądarka obecnie ma w pamięci, dla bieżącej strony. Nie będzie dostępny na innych stronach, nie będzie dostępny w innych przeglądarkach i nie będzie dostępny z innych komputerów.

Dlatego generalnie nie ma sensu przekształcanie Blobadresu URL w „normalny” adres URL. Jeśli chciałbyś mieć zwykły adres URL, musiałbyś wysłać dane z przeglądarki na serwer i pozwolić serwerowi udostępnić je jak zwykły plik.

Możliwe jest przekonwertowanie blob:adresu URL na data:adres URL, przynajmniej w Chrome. Możesz użyć żądania AJAX, aby „pobrać” dane z blob:adresu URL (nawet jeśli w rzeczywistości jest to po prostu wyciąganie ich z pamięci przeglądarki, a nie wysyłanie żądania HTTP).

Oto przykład:

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:Adresy URL prawdopodobnie nie są tym, co rozumiesz przez „normalne” i mogą być problematycznie duże. Jednak działają one jak zwykłe adresy URL, ponieważ można je udostępniać; nie są specyficzne dla bieżącej przeglądarki lub sesji.

Jeremy
źródło
14
Jeśli adresy URL obiektów blob nie wskazują danych serwera, to jak wygląda adres URL źródła filmów z YouTube: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (w Chrome)
bhh1988,
5
@ bhh1988 To bardzo interesujące znalezisko. Nie jestem pewien, co się tam dzieje. Jeśli spróbuję pobrać ich adres URL obiektu blob src za pomocą XMLHttpRequest, jak opisano w tym poście, żadna zawartość nie jest zwracana. Domyślam się, że albo (a) wygenerowali dowolny pusty adres URL obiektu BLOB, aby użyć go jako symbolu zastępczego podczas dostarczania danych z innego źródła lub (b) obiekt BLOB w jakiś sposób działa jako serwer proxy dla zaszyfrowanych danych (za pośrednictwem rozszerzeń zaszyfrowanych multimediów HTML5). Nie jestem jednak pewien, jak można by to zrobić w praktyce.
Jeremy,
19
@ bhh1988 Wygląda na to, że specyfikacja rozszerzeń źródła multimediów umożliwia tworzenie adresów URL obiektów blob dla strumieni multimediów zarządzanych przez JavaScript. Nie odpowiadają one statycznym danym, takim jak adresy URL obiektów blob omówione w tym poście, stąd różnica w zachowaniu, ale nadal odnoszą się do informacji lokalnych, a nie bezpośrednio do danych na serwerze.
Jeremy
1
Hmm, brzmi dobrze. Jest to mylące, ponieważ adres URL wygląda na prawdziwy i intencjonalny, ale jeśli jest to tylko symbol zastępczy, nie powinno mieć znaczenia, jaka jest wartość src.
bhh1988,
3
Pojawia się Not allowed to navigate top frame to data URL: data:text/plain;base64,...błąd. Dostaję dane, ale window.locationnie jest to dozwolone ...
loretoparisi
15

Innym sposobem tworzenia adresu URL danych z adresu URL obiektu BLOB może być użycie kanwy.

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)

jak widziałem w mdn, płótno.toDataURL jest dobrze obsługiwane przez przeglądarki. (z wyjątkiem tj. <9, zawsze tj. <9)

Leooonard
źródło
17
Pamiętaj, że dotyczy to oczywiście tylko danych obrazu i niektóre metadane mogą zostać utracone!
minmaxavg
1
Spowoduje to utworzenie łącza, ale jeśli go zastosujesz, otrzymasz tylko czarne pudełko.
Antfish
@Antfish, to nie powinno się zdarzyć, prawda?
Pacerier
5

Dla tych, którzy przyszli tutaj, szukając sposobu na pobranie wideo / audio z adresem URL obiektu BLOB, ta odpowiedź zadziałała . Krótko mówiąc, musisz znaleźć plik * .m3u8 na żądanej stronie internetowej przez Chrome -> zakładka Sieć i wkleić go do odtwarzacza VLC .

Inny przewodnik pokazuje, jak zapisać strumień za pomocą VLC Player .

Gasper J.
źródło
0

Znalazłem tę odpowiedź tutaj i chciałem się do niej odwołać, ponieważ wydaje się ona znacznie czystsza niż zaakceptowana odpowiedź:

function blobToDataURL(blob, callback) {
  var fileReader = new FileReader();
  fileReader.onload = function(e) {callback(e.target.result);}
  fileReader.readAsDataURL(blob);
}
Sean Bannister
źródło
-4

Jak powiedziała poprzednia odpowiedź, nie ma sposobu, aby zdekodować go z powrotem do adresu URL, nawet jeśli spróbujesz go zobaczyć z panelu chrome devtools, adres URL może być nadal zakodowany jako blob.

Jednak możliwe jest pobranie danych, innym sposobem uzyskania danych jest umieszczenie ich w kotwicy i bezpośrednie pobranie.

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

Wstaw to na stronę zawierającą adres URL obiektu blob i kliknij przycisk, otrzymasz zawartość.

Innym sposobem jest przechwycenie wywołania Ajax przez serwer proxy, a następnie wyświetlenie prawdziwego adresu URL obrazu.

ospider
źródło
<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> pobierz </a>. Powinno działać. Kiedy trafi w href, zmieni nazwę obiektu blob na abc.txt i pobierze
P Satish Patro
2
Dlaczego głosy przeciw? czy rzeczywiście próbowałeś tego, co powiedziałem?
ospider
Nie przegłosowałem. Przyszedłem tutaj. I myślałem, że to zadziała. Popieram ten mały kawałek
P Satish Patro
Nie jestem pewien co do głosów przeciw, ale z pewnością brzmi to prosto. (Powiedziawszy to, zawsze dostaję się Failed - Network errorw Chrome 83.0.4103.97 na Linuksie.)
toraritte