Convertir URL de blob en URL normal

Mi página genera una URL como esta: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"¿Cómo puedo convertirla en una dirección normal?

Lo estoy usando como un <img>'s srcatributo.

Una URL creada a partir de JavaScript Blobno se puede convertir en una URL "normal".

Una blob:URL no se refiere a los datos que existen en el servidor, se refiere a los datos que su navegador tiene actualmente en la memoria, para la página actual. No estará disponible en otras páginas, no estará disponible en otros navegadores y no estará disponible en otras computadoras.

Por lo tanto, no tiene sentido, en general, convertir una BlobURL en una URL "normal". Si quisiera una URL normal, tendría que enviar los datos desde el navegador a un servidor y hacer que el servidor los pusiera a disposición como un archivo normal.

Es posible convertir una blob:URL en una data:URL, al menos en Chrome. Puede usar una solicitud AJAX para "recuperar" los datos de la blob:URL (aunque en realidad solo los extrae de la memoria de su navegador, no hace una solicitud HTTP).

He aquí un ejemplo:

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:Es probable que las URL no sean lo que usted quiere decir con "normales" y pueden ser problemáticamente grandes. Sin embargo, funcionan como URL normales en el sentido de que se pueden compartir; no son específicos del navegador o la sesión actual.

Otra forma de crear una URL de datos a partir de una URL de blob puede ser utilizando 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)

como lo que vi en mdn, canvas.toDataURL es compatible con los navegadores. (excepto ie <9, siempre ie <9)

Para aquellos que vinieron aquí buscando una manera de descargar un video / audio de URL de blob, esta respuesta funcionó para mí. En resumen, necesitaría encontrar un archivo * .m3u8 en la página web deseada a través de Chrome -> pestaña Red y pegarlo en un reproductor VLC .

Otra guía le muestra cómo guardar una transmisión con VLC Player .

Como se ha dicho en la respuesta anterior, no hay forma de decodificarlo de nuevo a la URL, incluso cuando intentas verlo desde el panel de Chrome Devtools, la URL puede estar codificada como blob.

Sin embargo, es posible obtener los datos, otra forma de obtener los datos es ponerlos en un ancla y descargarlos directamente.

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

Inserte esto en la página que contiene la URL del blob y haga clic en el botón, obtendrá el contenido.

Otra forma es interceptar la llamada ajax a través de un servidor proxy, luego podría ver la verdadera URL de la imagen.