Convertir URL de blob en URL normal


95

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.


1
incluso después de decodificar la URL, sigue siendo un localhostenlace. En su lugar, averigüe su enlace público. (¿Qué CDN estás usando?)
Raptor

Deseo utilizar javascript.
Jacob

Use el enlace de stackvoverflow ... y W3C Su problema real será cómo hacerlo independiente del entorno en el que implementa su código
user1428716

¿Hay alguna forma de encontrar la URL pública de la dirección de blob? Este es el único valor que tengo.
Jacob

Respuestas:


163

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.


14
Si las URL de blob no apuntan a datos del servidor, ¿cómo es que la URL src de los videos de Youtube se ve así: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (en Chrome)
bhh1988

5
@ bhh1988 Ese es un hallazgo muy interesante. No estoy seguro de qué está pasando allí. Si intento recuperar su URL de blob src usando XMLHttpRequest, como se describe en esta publicación, no se devuelve contenido. Supongo que (a) generaron cualquier URL de Blob vacía para usar como marcador de posición mientras alimentaban datos de otra fuente o (b) el Blob de alguna manera actúa como un proxy para datos cifrados (a través de Extensiones de medios cifrados HTML5). Sin embargo, no estoy seguro de cómo cualquiera de estos podría hacerse en la práctica.
Black Lives Matter

19
@ bhh1988 Parece que la especificación de extensiones de fuente de medios permite que se creen URL de blob para las transmisiones de medios administradas por JavaScript. Estos no corresponden a datos estáticos como las URL de blob discutidas en esta publicación, de ahí la diferencia en el comportamiento, pero aún se refieren a información local, no directamente a datos en un servidor.
Black Lives Matter

1
Hmm, suena bien. Es confuso porque la URL parece real e intencionada, pero si es solo un marcador de posición, no debería importar el valor de src.
bhh1988

3
Me sale un Not allowed to navigate top frame to data URL: data:text/plain;base64,...error. Recibo los datos, pero window.locationno está permitido ...
loretoparisi

15

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)


17
Tenga en cuenta que, por supuesto, esto solo se aplica a los datos de imágenes, ¡y algunos metadatos podrían perderse!
minmaxavg

1
Al hacer esto, se crea un enlace, pero si lo sigue, solo obtendrá un recuadro negro.
Antfish

@Antfish, eso no debería suceder, ¿no?
Pacerier


-5

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.


<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> descargar </a>. Deberia de funcionar. Cuando llegue al href, cambiará el nombre del blob a abc.txt y lo descargará
P Satish Patro

1
¿Por qué los votos negativos? ¿De verdad has intentado lo que dije?
ospider

No he votado en contra. Vine aqui. Y pensé que funcionaría. Estoy a favor de esto un poco
P Satish Patro
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.