Download image with JavaScript

Question

Right now I have a canvas and I want to save it as PNG. I can do it with all those fancy complicated file system API, but I don't really like them.

I know if there is a link with download attribute on it:

<a href="img.png" download="output.png">Download</a> 

it will download the file if the user clicks on it. Therefore I came up with this:

$("<a>")     .attr("href", "img.png")     .attr("download", "output.png")     .appendTo("body")     .click()     .remove(); 

Demo: http://jsfiddle.net/DerekL/Wx7wn/

However, it doesn't seem to work. Does it have to be trigger by an user action? Or else why didn't it work?

Answer 1

As @Ian explained, the problem is that jQuery's click() is not the same as the native one.

Therefore, consider using vanilla-js instead of jQuery:

var a = document.createElement('a'); a.href = "img.png"; a.download = "output.png"; document.body.appendChild(a); a.click(); document.body.removeChild(a); 

Demo