One-click download button for a giphy gif

Question

One-click download button for a giphy gif

1.6k Views Asked by Luke Graham At 18 January 2020 at 06:31

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?

Original Q&A

There are 3 best solutions below

**elahe karami** · Answer 1 · 2020-01-18T07:40:54.927000

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>

**Adarsh Mohanty** · Answer 2 · 2020-01-18T11:35:10.900000

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>

**Natalia Duran** · Answer 3 · 2020-08-16T19:49:43.490000

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();
})();

One-click download button for a giphy gif

There are 3 best solutions below

Related Questions in HTML

Related Questions in DOWNLOAD

Related Questions in ONECLICK

Trending Questions

Popular # Hahtags

Popular Questions