Blob-URL in normale URL konvertieren

Question

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 's src Attribut.

Answer 1

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

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

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

Es ist möglich, eine blob: URL in eine data: URL zu konvertieren, zumindest in Chrome. Sie können eine AJAX-Anforderung verwenden, um die Daten von der URL blob: abzurufen (obwohl sie es nur aus dem Speicher Ihres Browsers herauszieht, ohne eine HTTP-Anforderung 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, was Sie unter "normalen" bedeuten und kann in problematischer Weise 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.

Answer 2

Eine andere Möglichkeit zum Erstellen einer Daten-URL aus der Blob-URL kann Canvas sein.

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) 

als was ich sah in mdn, Canvas.toDataURL wird von Browsern gut unterstützt. (außer ie < 9, immer also < 9)