Converter URL de blob em URL normal

Minha página gera um URL como este: "blob:http%3A//localhost%3A8383/568233a1-8b13-48b3-84d5-cca045ae384f"Como posso convertê-lo em um endereço normal?

Eu estou usando-o como um <img>'s srcatributo.

Um URL que foi criado a partir de um JavaScript Blob não pode ser convertido em um URL "normal".

Um blob:URL não se refere aos dados existentes no servidor, mas aos dados que seu navegador possui atualmente na memória, para a página atual. Não estará disponível em outras páginas, não estará disponível em outros navegadores e não estará disponível em outros computadores.

Portanto, não faz sentido, em geral, converter um Blob URL em URL "normal". Se você quisesse um URL comum, teria que enviar os dados do navegador para um servidor e fazer com que o servidor os disponibilizasse como um arquivo comum.

É possível converter um blob:URL em data:URL, pelo menos no Chrome. Você pode usar uma solicitação AJAX para "buscar" os dados doblob: URL (mesmo que ela esteja apenas puxando-os da memória do seu navegador, não fazendo uma solicitação HTTP).

Aqui está um exemplo:

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:Os URLs provavelmente não são o que você entende por "normal" e podem ser problemáticos grandes. No entanto, eles funcionam como URLs normais, pois podem ser compartilhados; eles não são específicos para o navegador ou sessão atual.

outra maneira de criar um url de dados a partir de um blob pode ser usando o 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 o que eu vi no MDN, canvas.toDataURL é bem suportado por navegadores. (exceto ie <9, sempre ie <9)

Para aqueles que vieram aqui em busca de uma forma de baixar um blob url de vídeo / áudio, essa resposta funcionou para mim. Resumindo, você precisaria encontrar um arquivo * .m3u8 na página da web desejada por meio do Chrome -> guia Rede e colá-lo em um player VLC .

Outro guia mostra como salvar um stream com o VLC Player .

Como a resposta anterior disse, não há como decodificá-lo de volta para url, mesmo quando você tenta vê-lo no painel do Chrome Devtools, o url ainda pode estar codificado como blob.

Porém, é possível obter os dados, outra forma de obter os dados é colocá-los em uma âncora e baixá-los diretamente.

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

Insira isso na página que contém o URL do blob e clique no botão para obter o conteúdo.

Outra maneira é interceptar a chamada ajax por meio de um servidor proxy, então você pode ver o url da imagem verdadeira.