Przekonwertuj adres URL obiektu BLOB na normalny adres URL

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.

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.

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)

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 .

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);
}

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.