Converti l'URL del BLOB in un URL normale

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?

Sto usando come un <img>'s srcattributo.

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

Un blob:URL non si riferisce ai dati esistenti sul server, si riferisce ai dati che il tuo browser ha attualmente in memoria, per la pagina corrente. Non sarà disponibile su altre pagine, non sarà disponibile in altri browser e non sarà disponibile da altri computer.

Quindi non ha senso, in generale, convertire un BlobURL in un URL "normale". Se volessi un URL normale, dovresti 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 blob:URL in un data:URL, almeno in Chrome. È possibile utilizzare una richiesta AJAX per "recuperare" i dati blob:dall'URL (anche se in realtà li estrae solo dalla memoria del browser, non effettua 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:Gli URL probabilmente non sono ciò che intendi per "normale" e possono essere problematicamente grandi. Tuttavia funzionano come normali URL in quanto possono essere condivisi; non sono specifici per il browser o la sessione corrente.

un altro modo per creare un URL di dati dall'URL del blob potrebbe 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 bene dai browser. (eccetto ie <9, sempre ie <9)

Per coloro che sono venuti qui alla ricerca di un modo per scaricare un video / audio dell'URL di un BLOB, questa risposta ha funzionato per me. In breve, dovresti trovare un file * .m3u8 nella pagina web desiderata tramite Chrome -> scheda Rete e incollarlo in un lettore VLC .

Un'altra guida mostra come salvare uno stream con VLC Player .

Come ha detto la risposta precedente, non c'è modo di decodificarlo come URL, anche quando provi a vederlo dal pannello Chrome devtools, l'URL potrebbe essere ancora codificato come blob.

Tuttavia, è possibile ottenere i dati, un altro modo per ottenere i dati è metterli in un ancoraggio e scaricarli direttamente.

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

Inseriscilo nella pagina contenente l'URL del blob e fai clic sul pulsante, ottieni il contenuto.

Un altro modo è intercettare la chiamata ajax tramite un server proxy, quindi è possibile visualizzare il vero URL dell'immagine.