I am wondering if it is possible to add a download function to a click event purely in Javascript, for example, when a user clicks on an image, it gets automatically downloaded. For example I have an image tag <img src="filelocation" id="img"/> and want it to be downloaded on click. (I can't use "download="myfile.png".

Is there something like

$('#img').on('click',function(e){
  img.download="myfile.png";
});

All the answers online suggest adding the download="..." into my tag

Thanks!

I am wondering if it is possible to add a download function to a click event purely in Javascript, for example, when a user clicks on an image, it gets automatically downloaded. For example I have an image tag <img src="filelocation" id="img"/> and want it to be downloaded on click. (I can't use "download="myfile.png".

Is there something like

$('#img').on('click',function(e){
  img.download="myfile.png";
});

All the answers online suggest adding the download="..." into my tag

Thanks!

• javascript
• jquery
• html
• download

Share Improve this question Follow asked Jul 22, 2015 at 16:23 klaus ruprechtklaus ruprecht 13711 gold badge33 silver badges1010 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Maybe something like this:

document.getElementById('download').click();

<a id="download" href="https://assets.entrepreneur./content/16x9/822/20150721193719-solshero3.jpeg" download hidden></a>

Play with it: here

But if you really can't have the download attribute: Play this then.

Good luck!!

You can create a anchor element on click of the image and use .click() to trigger the click on that anchor even if its not attach to your page.

And if this still violate the requirement, then you may have to achieve it with server-side works.

See Change name of download in javascript

window.onload = function() {
  // Fake image for testment
  var canvas = document.createElement('canvas');
  canvas.width = 300;
  canvas.height = 200;
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'black';
  ctx.fillRect(0, 0, 200, 100);
  ctx.fillStyle = 'cyan';
  ctx.fillText('test', 50, 50);
  
  var makeImageDownloadable = function(image, name) {
    
    image.addEventListener('click', function() {     
      var a = document.createElement('a');
      a.href = image.src;
      // may need to check the datatype, or just write image to another tmp canvas first.
      a.download = name + '.png';
      a.click();
     });
  };
  
  
  var image = new Image();
  image.onload = function() {
    document.querySelector('#holder').appendChild(image);
    makeImageDownloadable(image, 'testimage');
  };
  image.src = canvas.toDataURL('image/png');
  
};

<div id="holder"></div>

You can use the HTML5 download attribute.

 <a href="http://www.hdwallpapersimages./wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg" download="my_download.png"><img src="http://www.hdwallpapersimages./wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg">
     </a>

I am unsure of browser patibility in this,better soultion would be to include server side scripts too.

JSFiddle: http://jsfiddle/k2rear94/

if u want this to be dynamic, try this.

$("SomeElement").onclick = function(){
$("<a id='tmp' href='link' download ></a>).appendTo("body");
$("#tmp").click();
$("#tmp").remove();
}

But remember, download attribute is not supported in IE.