Download image with JavaScript Download image with JavaScript javascript javascript

Download image with JavaScript


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


The problem is that jQuery doesn't trigger the native click event for <a> elements so that navigation doesn't happen (the normal behavior of an <a>), so you need to do that manually. For almost all other scenarios, the native DOM event is triggered (at least attempted to - it's in a try/catch).

To trigger it manually, try:

var a = $("<a>")    .attr("href", "http://i.stack.imgur.com/L8rHf.png")    .attr("download", "img.png")    .appendTo("body");a[0].click();a.remove();

DEMO: http://jsfiddle.net/HTggQ/

Relevant line in current jQuery source: https://github.com/jquery/jquery/blob/1.11.1/src/event.js#L332

if ( (!special._default || special._default.apply( eventPath.pop(), data ) === false) &&        jQuery.acceptData( elem ) ) {