Download de imagem de blob

Alguns sites têm algo assim:

<img src="blob:foo" alt="bar">

A função "Salvar imagem como" no Firefox não me permite salvar o blob da imagem: foo. Não consigo baixar a imagem usando "Salvar página como" também. Como posso baixar a imagem?

html

— Anonymous
fonte

Algumas páginas protegem a fonte, você pode precisar nos fornecer referências específicas. Ref aleatoriamente de um site de fotografia que eu sou um membro de ... viewbug.com/contests/travel-photography-project/81413133 Você pode visualizá-lo, mas não pode obtê-lo, intencionalmente.

— Tetsujin

não há solução genérica, você terá que fornecer um exemplo específico

— Albin

Claro que existe uma solução genérica

— miknik

@miknik Então, forneça uma resposta ...

— DavidPostill

@DavidPostill Me dê uma chance :)

— miknik

Respostas:

Se você abrir as Ferramentas do desenvolvedor do navegador, por exemplo, F12 no Chrome. Alterne para o modo de exibição Rede, marque "Preservar log" e "Desativar cache" e recarregue a página.

Encontre o recurso de interesse, se ele ajudar você a filtrar para o tipo, por exemplo Img, Mídia, etc. Depois de clicar no recurso, você pode clicar na guia Visualizar e salvar o recurso de lá.

Caso contrário, tenho certeza de que uma ferramenta como o Chrome Cache View - https://www.nirsoft.net/utils/chrome_cache_view.html seria capaz de ajudar.

— HelpingHand
fonte

Você só precisa criar seu próprio elemento usando a fonte de imagem da imagem que deseja baixar, como exemplo básico:

var image = document.querySelector('img');       // Image you want to save
var saveImg = document.createElement('a');       // New link we use to save it with
saveImg.href = image.src                         // Assign image src to our link target
saveImg.download = "imagename.jpg";              // set filename for download
saveImg.innerHTML = "Click to save image";       // Set link text
document.body.appendChild(saveImg);              // Add link to page

Agora clique no link e a imagem será baixada

— miknik
fonte