CODEWITHSUNDEEP
javascriptjqueryhtmldownload
klaus ruprecht
klaus ruprecht

Reputation: 127

add download function to a click event with Javascript

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!

Upvotes: 1

Views: 3295

Answers (4)

fuyushimoya
fuyushimoya

Reputation: 9813

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>

Upvotes: 2

angelcool.net
angelcool.net

Reputation: 2546

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!!

Upvotes: 3

user3235186
user3235186

Reputation:

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.

Upvotes: 1

Varun
Varun

Reputation: 1946

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/

Upvotes: 1

Related Questions