webentwicklung-frage-antwort-db.com.de

Konvertiert die Blob-URL in eine normale URL

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

Ich benutze es als <img> 's src Attribut.

77
Jacob

Eine URL, die aus einem JavaScript Blob erstellt wurde, kann nicht in eine "normale" URL konvertiert werden.

EIN blob: URL verweist nicht auf Daten, die auf dem Server vorhanden sind, sondern auf Daten, die Ihr Browser derzeit für die aktuelle Seite gespeichert hat. Es wird nicht auf anderen Seiten verfügbar sein, es wird nicht in anderen Browsern verfügbar sein und es wird nicht von anderen Computern verfügbar sein.

Daher ist es im Allgemeinen nicht sinnvoll, eine Blob -URL in eine "normale" URL umzuwandeln. Wenn Sie eine normale URL benötigen, müssen Sie die Daten vom Browser an einen Server senden und vom Server wie eine normale Datei zur Verfügung stellen lassen.

Es ist möglich, ein blob: URL in ein data: URL, zumindest in Chrome. Sie können eine AJAX Anfrage verwenden, um die Daten aus dem blob: URL (obwohl es wirklich nur aus dem Speicher Ihres Browsers gezogen wird, ohne eine HTTP-Anfrage zu 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 mit "normal" meinen, 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.

136
Jeremy Banks

eine andere Möglichkeit, eine Daten-URL aus einer Blob-URL zu erstellen, ist 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)

15
Leooonard

Für diejenigen, die hierher gekommen sind, um nach einer Möglichkeit zum Herunterladen eines Blob-URL-Videos/-Audios zu suchen, diese Antwort hat funktioniert für mich. Kurz gesagt, Sie müssen eine * .m3u8-Datei auf der gewünschten Webseite über Chrome -> Network finden Tabulatortaste und füge es in einen VLC-Player ein .

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

1
Gasper J.