Konvertieren Sie die Blob-URL in eine normale URL

Meine Seite generiert eine URL wie folgt: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Wie kann ich sie in eine normale Adresse konvertieren?

Ich benutze es als ein <img>‚s - srcAttribut.

Eine aus einem JavaScript erstellte URL Blobkann nicht in eine "normale" URL konvertiert werden.

Eine blob:URL bezieht sich nicht auf Daten, die auf dem Server vorhanden sind, sondern auf Daten, die Ihr Browser derzeit für die aktuelle Seite im Speicher hat. Es ist nicht auf anderen Seiten verfügbar, es ist nicht in anderen Browsern verfügbar und es ist nicht auf anderen Computern verfügbar.

Daher ist es im Allgemeinen nicht sinnvoll, eine BlobURL in eine "normale" URL zu konvertieren . Wenn Sie eine normale URL wünschen, müssen Sie die Daten vom Browser an einen Server senden und vom Server wie eine normale Datei verfügbar machen.

Zumindest in Chrome ist es möglich, eine blob:URL in eine data:URL umzuwandeln . Sie können eine AJAX-Anfrage verwenden, um die Daten von der blob:URL abzurufen (obwohl sie wirklich nur aus dem Speicher Ihres Browsers gezogen werden und keine HTTP-Anfrage stellen).

Hier ist ein Beispiel:

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:URLs sind wahrscheinlich nicht das, was Sie unter "normal" verstehen, und können problematisch groß sein. Sie funktionieren jedoch wie normale URLs, da sie gemeinsam genutzt werden können. Sie sind nicht spezifisch für den aktuellen Browser oder die aktuelle Sitzung.

Eine andere Möglichkeit, eine Daten-URL aus einer Blob-URL zu erstellen, ist möglicherweise die Verwendung von 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)

Wie ich in mdn gesehen habe, wird canvas.toDataURL von Browsern gut unterstützt. (außer dh <9, immer dh <9)

Für diejenigen, die hierher kamen und nach einer Möglichkeit suchten, eine Blob-URL für Video / Audio herunterzuladen, funktionierte diese Antwort für mich. Kurz gesagt, Sie müssten eine * .m3u8-Datei auf der gewünschten Webseite über die Registerkarte Chrome -> Netzwerk finden und in einen VLC-Player einfügen .

Eine weitere Anleitung zeigt Ihnen, wie Sie einen Stream mit dem VLC Player speichern .

Wie in der vorherigen Antwort angegeben, gibt es keine Möglichkeit, es wieder in URL zu dekodieren. Selbst wenn Sie versuchen, es im Chrome Devtools-Bedienfeld anzuzeigen, wird die URL möglicherweise immer noch als Blob codiert.

Es ist jedoch möglich, die Daten abzurufen. Eine andere Möglichkeit, die Daten abzurufen, besteht darin, sie in einen Anker zu legen und direkt herunterzuladen.

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

Fügen Sie dies auf der Seite mit der Blob-URL ein und klicken Sie auf die Schaltfläche, um den Inhalt zu erhalten.

Eine andere Möglichkeit besteht darin, den Ajax-Aufruf über einen Proxyserver abzufangen und dann die wahre Bild-URL anzuzeigen.