1

Problema


Como eu faço para fazer o download de varias imagens com javascript?

Por exemplo, como faço para quando eu clicar em um botão no javascript ele automaticamente acessar a url: http://www.bing.com/az/hprichbg/rb/FrenchSunset_PT-BR10590691175_1366x768.jpg e baixar a imagem?

HTML

<button onclick="salvar_imagem()">Salvar Imagem</button>

JAVASCRIPT

<script>
function salvar_imagem(){
     // ir em http://www.bing.com/az/hprichbg/rb/FrenchSunset_PT-BR10590691175_1366x768.jpg e baixar a imagem
}
</script>

Não faço ideia de como se faz isso.

Observação

Se isso não for possível fazer em JavaScript alguém poderia me dar uma sugestão de como se faz em PHP?

3
  • 1
    Você quer salvar isso aonde? No cliente ou no servidor? Commented 6/03/2014 às 12:19
  • No cliente mesmo :) Commented 6/03/2014 às 12:19
  • Não vou responder por falta de experiência, mas sei que você não pode salvar diretamente no cliente, mas tem workarounds. Tem o File System API do Html5, ou se você quiser ir mais longe, pode fazer uma aplicação desktop pro cliente que obedeça a um protocolo para fazer esse download. Commented 6/03/2014 às 12:23

3 Respostas 3

4

Por questões de segurança, o navegador não permite salvar imagens/arquivos diretamente para a máquina do usuário, o que pode-se fazer é carregar a imagem na página e solicitar que o usuário salve a imagem manualmente.

2

Você pode carregar a imagem em um canvas e pegar a url do canvas pra salvar. Segue um exemplo retirado daqui:

// Pegue uma referencia para o elemento da imagem
var elephant = document.getElementById("elephant");

// Haja quando ela carregar
elephant.addEventListener("load", function () {
var imgCanvas = document.createElement("canvas"),
imgContext = imgCanvas.getContext("2d");

// Tenha certeza que o canvas tem o mesmo tamanho que a imagem
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;

// Desenhe a imagem no canvas
imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height);

// Transforme o canvas em URL
var imgAsDataURL = imgCanvas.toDataURL("image/png");

// Salve
try {
localStorage.setItem("elephant", imgAsDataURL);
}
catch (e) {
console.log("Storage failed: " + e);
}
}, false); 

Boa Sorte.

2
  • Note que isso persiste a imagem na local storage do navegador, não em pastas do usuário. Além de tornar inconveniente o acesso posterior à imagem, você ainda poderá perder todas as imagens que tiver salvo que tiver salvado quando limpar os dados de navegação. Commented 26/07/2017 às 12:24
  • 1
    O "Boa Sorte" foi bem sugestivo... =) Commented 26/07/2017 às 20:15
2

Na verdade não há como fazer isso via javascript, os browsers possuem uma restrição de segurança que não permite que seja feita requisição para um servidor diferente. Portanto quem deve fazer isso é o seu back-end e não o front-end.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .