One-click download button for a giphy gif

Question

I want to create a one-click download link for images. I get inconsistent results with the html5 download attribute.

W3 schools has a working example triggering a download: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_download

When I change the image urls to anything else it does not trigger a file download.

For example this code doesn't trigger a download:

<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" download>

Can anyone explain why?

score 1 · Answer 1 · answered Aug 16 '20 at 19:49

I asked the same question, here is the code that worked for me:

(async () => {
  //create new a element
  let a = document.createElement('a');
  // get image as blob
  let response = await fetch('https://media2.giphy.com/media/DvyLQztQwmyAM/giphy.gif?cid=e9ff928175irq2ybzjyiuicjuxk21vv4jyyn0ut5o0d7co50&rid=giphy.gif');
  let file = await response.blob();
  // use download attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
  a.download = 'myGif';
  a.href = window.URL.createObjectURL(file);
  //store download url in javascript https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#JavaScript_access
  a.dataset.downloadurl = ['application/octet-stream', a.download, a.href].join(':');
  //click on element to start download
  a.click();
})();

I am trying to achieve the same in java, I keep getting an HTML page, see https://stackoverflow.com/questions/67427016/how-to-download-a-giphy-from-its-url-in-java, didn't you get that error ? — Dimitri Kopriwa, May 06 '21 at 23:08

score 0 · Answer 2 · answered Jan 18 '20 at 07:40

In the w3schools example that you have attached, the link text which you should click on to start download is an image. They have put an image inside of an anchor tag (<a></a>) and then have given URL to the href attr of the anchor. Then if you change the href, the url will change without changing the image and you can start downloading by clicking on the image.

in the code that you have attached to your question (Which is working and download an image as a file if you add the </a> to the end of it.), you've given the URL of an image as href attr. So if you change the href, different file would be downloaded.

<a href="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" download>click</a>

if you want to click on your image to start the download, you should put an image inside of the anchor and then gave the href attr, your file URL.

<a href="" download>
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg" alt="image" width="100" />
</a>

score 0 · Answer 3 · answered Jan 18 '20 at 11:35

The problem of why it's not working is that the download attribute only works for same-origin URLs. You can find the details here MDN Docs

As for an alternative, you can use some javascript like this to achieve the same.

function download_img(e,link){
var image = new Image();
image.crossOrigin = "anonymous";
image.src = link;
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    tempbtn = document.createElement('a');
    tempbtn.href = blob;
    tempbtn.download = 'image.jpg'; // or define your own name. 
    tempbtn.click();
    tempbtn.remove(); 
};
}

<!DOCTYPE html>
<html>
<body>

   
<a href="#" onclick="download_img(this,'https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/687px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg')"  >Download image
</a>

<p><b>Note:</b> The download attribute is not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).</p>
 
</body>
</html>

Wow, I'm impressed it starts the download!! Very cool. To make it trickier, I wish it downloaded an animated gif. For example: https://media3.giphy.com/media/8xyFnStKunzAk/200.gif — Luke Graham, Jan 23 '20 at 04:22

One-click download button for a giphy gif

3 Answers3

Linked