javascript - open - get real url from blob

Convierte la URL de blob en una URL normal

Question

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

Lo estoy usando como un atributo src <img> .

Answer 1

Como ha dicho la respuesta anterior, no hay forma de descodificarla de nuevo a la url, incluso cuando intenta verla desde el panel devtools de cromo, la url puede seguir codificándose como blob.

Sin embargo, es posible obtener los datos, otra forma de obtenerlos es colocarlos en un anclaje y descargarlos directamente.

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

Inserta esto en la página que contiene blob url y haz clic en el botón, obtienes el contenido.

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

Answer 2

Otra forma de crear una url de datos desde blob url 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 soportado bien por los navegadores. (excepto, por ejemplo, <9, siempre es decir <9)

Answer 3

Una URL que se creó a partir de una Blob JavaScript no se puede convertir a una URL "normal".

Un 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 URL de Blob una URL "normal". Si desea una URL ordinaria, deberá enviar los datos del navegador a un servidor y hacer que el servidor lo ponga a disposición como un archivo ordinario.

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

Aquí hay 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: URL probablemente no son lo que usted quiere decir con "normal" y pueden ser problemáticamente grandes. Sin embargo, funcionan como URL normales porque se pueden compartir; no son específicos del navegador o sesión actual.