Konvertieren Sie die Blob-URL in eine normale URL

94

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.

Jacob
quelle
1
Auch nach dem Entschlüsseln der URL ist es immer noch ein localhostLink. Finden Sie stattdessen den öffentlichen Link heraus. (Welches CDN verwenden Sie?)
Raptor
Ich möchte Javascript verwenden.
Jacob
Verwenden Sie den Stackvoverflow-Link .. und W3C Ihr eigentliches Problem wird sein, wie Sie es unabhängig von der Umgebung machen können, in der Sie Ihren Code bereitstellen
user1428716
Gibt es eine Möglichkeit, die öffentliche URL über die Blob-Adresse zu finden? Dies ist der einzige Wert, den ich habe.
Jacob

Antworten:

162

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.

Jeremy
quelle
14
Wenn Blob-URLs nicht auf Serverdaten verweisen, wie folgt dann die src-URL von Youtube-Videos: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (in Chrome)
bhh1988
5
@ bhh1988 Das ist ein sehr interessanter Fund. Ich bin mir nicht sicher, was dort los ist. Wenn ich versuche, ihre src-Blob-URL mithilfe einer XMLHttpRequest abzurufen, wie in diesem Beitrag beschrieben, wird kein Inhalt zurückgegeben. Ich vermute, dass entweder (a) sie eine leere Blob-URL generiert haben, die als Platzhalter beim Einspeisen von Daten aus einer anderen Quelle verwendet werden soll, oder (b) der Blob irgendwie als Proxy für verschlüsselte Daten fungiert (über HTML5 Encrypted Media Extensions). Ich bin mir jedoch nicht sicher, wie beides in der Praxis tatsächlich durchgeführt werden könnte.
Jeremy
19
@ bhh1988 Es sieht so aus, als ob die Spezifikation für Medienquellenerweiterungen das Erstellen von Blob-URLs für Medienströme ermöglicht, die von JavaScript verwaltet werden. Diese entsprechen nicht statischen Daten wie den in diesem Beitrag beschriebenen Blob-URLs, daher der Unterschied im Verhalten, beziehen sich jedoch weiterhin auf lokale Informationen, nicht direkt auf Daten auf einem Server.
Jeremy
1
Hmm, hört sich richtig an. Es ist verwirrend, weil die URL real und absichtlich aussieht, aber wenn es nur ein Platzhalter ist, sollte es keine Rolle spielen, welchen Wert src hat.
Bhh1988
3
Ich bekomme eine Not allowed to navigate top frame to data URL: data:text/plain;base64,...Fehlermeldung. Ich bekomme die Daten, aber das window.locationist nicht erlaubt ...
loretoparisi
15

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)

Leooonard
quelle
17
Beachten Sie, dass dies natürlich nur für Bilddaten gilt und einige Metadaten verloren gehen können!
Minmaxavg
1
Dadurch wird ein Link erstellt, aber wenn Sie ihm folgen, erhalten Sie nur eine Blackbox.
Ameisenfisch
@Antfish, das sollte doch nicht passieren, oder?
Pacerier
5

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 .

Gasper J.
quelle
-5

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.

ospider
quelle
<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> download </a>. Es sollte funktionieren. Wenn es die href trifft, wird es den Blob in abc.txt umbenennen und herunterladen
P Satish Patro
Warum die Abstimmungen? Hast du tatsächlich versucht, was ich gesagt habe?
ospider
Ich habe nicht herabgestimmt. Ich kam hierher. Und ich dachte, es wird funktionieren. Ich bin dafür ein kleines bisschen
P Satish Patro