Konwersja adresu URL blobu na zwykły URL

Question

Moja strona generuje następujący adres URL: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f" Jak mogę przekonwertować go na zwykły adres?

Używam go jako atrybutu 'src.

Answer 1

Adres URL utworzony na podstawie kodu JavaScript Blob nie może zostać przekonwertowany na "normalny" adres URL.

Adres URL nie odnosi się do danych, które istnieją na serwerze, dotyczy danych, które przeglądarka ma aktualnie 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 na innych komputerach.

Dlatego ogólnie nie ma sensu przekształcanie adresu URL z adresu URL na "zwykły" adres URL na Blob. Jeśli chcesz mieć zwykły adres URL, musisz przesłać dane z przeglądarki do serwera i udostępnić serwer jak zwykły plik.

Możliwe jest przekształcenie adresu URL blob: w adres URL data:, przynajmniej w Chrome. Możesz użyć żądania AJAX, aby "pobrać" dane z adresu URL blob: (chociaż tak naprawdę to tylko wyciągnięcie go z pamięci przeglądarki, bez wysyłania żą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 nie są prawdopodobnie co masz na myśli przez "normalne" i może być problematycznie duża. Jednak działają tak, jak zwykłe adresy URL, dzięki czemu można je udostępniać; nie są one specyficzne dla bieżącej przeglądarki lub sesji.

Answer 2

Innym sposobem na utworzenie adresu URL danych z adresu URL blob może być użycie obszaru roboczego.

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 to, co widziałem w mdn, canvas.toDataURL jest obsługiwany również przez przeglądarki. (z wyjątkiem np. < 9, zawsze tj. < 9)