1

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!

klaus ruprecht
  • 127
  • 1
  • 2
  • 10

4 Answers4

3

Maybe something like this:

document.getElementById('download').click();
<a id="download" href="https://assets.entrepreneur.com/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!!

angelcool.net
  • 2,505
  • 1
  • 24
  • 26
2

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>
Community
  • 1
  • 1
fuyushimoya
  • 9,715
  • 3
  • 27
  • 34
1

You can use the HTML5 download attribute.

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

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

JSFiddle: http://jsfiddle.net/k2rear94/

Varun
  • 1,946
  • 2
  • 11
  • 17
  • @kcube I think so,what am i missing ? – Varun Jul 22 '15 at 16:37
  • @klausruprecht Are you not using HTML 5? If not, can you use AJAX? – Varun Jul 22 '15 at 16:43
  • I use HTML5 but my img is created dynamically and also from a different page so I can't put attributes to the tags. I can use AJAX – klaus ruprecht Jul 22 '15 at 16:49
  • @klausruprecht You can add the download attribute even if element is loaded dynamically. Even better,if you can use AJAX ,just get a download link of the file ,and then just do `` ? – Varun Jul 22 '15 at 16:52
  • the whole tag is created dynamically. Does that still work then? do you mean what kcube suggested? – klaus ruprecht Jul 22 '15 at 16:56
  • @klausruprecht Not exactly,**IF the image is shown on page load**,then you can add the `download` attribute using jquery. – Varun Jul 22 '15 at 16:59
1

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.

  • Thanks, i don't quite understand, so I click on the element and that creates the attribute into the img? do you mean like this http://fiddle.jshell.net/sf7L8r3p/ ? – klaus ruprecht Jul 22 '15 at 16:54
  • if u don't want a static a tag on your page, this will append it on click event of your element to the body, trigger click event on a tag which would initiate the download, then remove the element from DOM. But this would be of no help if you are in IE. –  Jul 22 '15 at 17:04