Converti blob URL nell'URL normale

Question

La mia pagina genera un URL come questo: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f" Come posso convertirlo in un indirizzo normale?

Lo sto utilizzando come attributo <img>src.

Answer 1

Un URL creato da un JavaScript Blob non può essere convertito in un URL "normale".

A blob: L'URL non fa riferimento ai dati esistenti sul server, fa riferimento ai dati attualmente disponibili nel browser per la pagina corrente. Non sarà disponibile su altre pagine, non sarà disponibile in altri browser e non sarà disponibile da altri computer.

Pertanto, non ha senso, in generale, convertire un URL Blob in un URL "normale". Se si desidera un URL normale, è necessario inviare i dati dal browser a un server e fare in modo che il server lo renda disponibile come un normale file.

È possibile convertire un URL blob: in un URL data:, almeno in Chrome. È possibile utilizzare una richiesta AJAX per "prelevare" i dati dall'URL blob: (anche se in realtà è sufficiente estrarlo dalla memoria del browser, non effettuare una richiesta HTTP).

Ecco un esempio:

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 non sono probabilmente ciò che si intende per "normale" e può essere problematico di grandi dimensioni. Tuttavia funzionano come normali URL in quanto possono essere condivisi; non sono specifici per il browser o la sessione corrente.

Answer 2

un altro modo per creare un URL di dati da blob url può essere l'utilizzo di 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) 

come quello che ho visto in MDN, canvas.toDataURL è supportato anche dai browser. (ad eccezione, ad esempio, < 9, sempre <)