Download images

Question

Problem

---

How do I download several images with javascript?

For example, how do I when I click on a javascript button it automatically accesses url: http://www.bing.com/az/hprichbg/rb/FrenchSunset_PT-BR10590691175_1366x768.jpg and download the image?

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>

I have no idea how to do that.

Observing

If this is not possible to do in JavaScript could someone give me a hint as to how it is done in PHP?

Answer 1

For security reasons, the browser does not allow to save images/files directly to the user’s machine, what can be done is to load the image on the page and request the user to save the image manually.

Answer 2

Actually there is no way to do this via javascript, browsers have a security restriction that does not allow a request to be made to a different server. So who should do this is your back-end and not the front-end.

Answer 3

You can upload the image to a canvas and take the canvas URL to save. Here’s an example from from here:

// 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); 

Good Luck.