Converter URL de blob em URL normal

95

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.

Jacob
fonte
1
mesmo depois de decodificar a URL, ainda é um localhostlink. Em vez disso, descubra seu link público. (qual CDN você está usando?)
Raptor
Desejo usar javascript.
Jacob
Use o link stackvoverflow .. e W3C Seu verdadeiro problema será como torná-lo independente do ambiente no qual você implanta seu código
user1428716
Existe uma maneira de encontrar o URL público do endereço do blob. Este é o único valor que tenho.
Jacob
Também superuser.com/q/948738/78897
Pacerier

Respostas:

162

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.

Black Lives Matter
fonte
14
Se os urls do blob não apontam para os dados do servidor, então como o url src dos vídeos do Youtube se parece com: src = "blob: https% 3A // www.youtube.com / 44f26667-03f1-4978-9eed-af0cbf11dd67" (em Chrome)
bhh1988
5
@ bhh1988 Essa é uma descoberta muito interessante. Não tenho certeza do que está acontecendo lá. Se eu tentar recuperar sua URL blob src usando um XMLHttpRequest, conforme descrito nesta postagem, nenhum conteúdo é retornado. Meu palpite é que (a) eles geraram qualquer URL de Blob vazio para usar como espaço reservado durante a alimentação de dados de outra fonte ou (b) o Blob de alguma forma atua como um proxy para dados criptografados (via HTML5 Encrypted Media Extensions). No entanto, não tenho certeza de como qualquer um desses poderia realmente ser feito na prática.
Black Lives Matter
19
@ bhh1988 Parece que a especificação das extensões da fonte de mídia permite que URLs de blob sejam criados para fluxos de mídia gerenciados por JavaScript. Eles não correspondem a dados estáticos como os URLs de blob discutidos nesta postagem, daí a diferença de comportamento, mas eles ainda se referem a informações locais, não diretamente a dados em um servidor.
Black Lives Matter
1
Hmm, parece certo. É confuso porque o url parece real e intencional, mas se for apenas um espaço reservado, não deve importar qual é o valor de src.
bhh1988
3
Recebo um Not allowed to navigate top frame to data URL: data:text/plain;base64,...erro. Recebo os dados, mas window.locationnão é permitido ...
loretoparisi
15

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)

Leooonard
fonte
17
Observe que isso se aplica apenas a dados de imagem, e alguns metadados podem ser perdidos!
minmaxavg
1
Fazer isso cria um link, mas se você segui-lo, verá apenas uma caixa preta.
Antfish
@Antfish, isso não deveria acontecer, não é?
Pacerier
5

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 .

Gasper J.
fonte
-5

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.

ospider
fonte
<a href="blob: example.com/xxxx-xxxx-xxxx-xxxx "download="abc.txt"> download </a>. Deve funcionar. Quando atingir o href, ele renomeará o blob para abc.txt & download
P Satish Patro
1
Por que os votos negativos? você realmente tentou o que eu disse?
ospider
Eu não votei contra ele. Eu vim aqui. E, eu pensei que iria funcionar. Eu apóio este um pouco
P Satish Patro