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 src
atrybut.
javascript
url
blob
Jakub
źródło
źródło
localhost
link. Zamiast tego znajdź publiczny link. (którego CDN używasz?)Odpowiedzi:
Adres URL utworzony z kodu JavaScript
Blob
nie 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
Blob
adresu 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 nadata:
adres URL, przynajmniej w Chrome. Możesz użyć żądania AJAX, aby „pobrać” dane zblob:
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.źródło
Not allowed to navigate top frame to data URL: data:text/plain;base64,...
błąd. Dostaję dane, alewindow.location
nie jest to dozwolone ...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)
źródło
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 .
źródło
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); }
źródło
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.
źródło
Failed - Network error
w Chrome 83.0.4103.97 na Linuksie.)