2

So I am working with download button, so I want to download image based on URL of the image. This image is not present on my website/page, I just want to download image based on it's URL. When person click on download button image, image should start download instead of redirecting to the image. I seen some answers, which says href="path/to/img", but I guess in my case I don't have path, I just have image URL. So how it possible to download image based on button click?

JsFiddle: Click Here!

Code:

<a download="https://i.imgur.com/oIzrKK3.gif" href="https://i.imgur.com/oIzrKK3.gif" title="ImageName"><img src='https://i.imgur.com/yeGaCcS.jpg'/></a>
santosh
  • 742
  • 8
  • 19
  • Read [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a): _`download` only works for [same-origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) URLs_ – Alon Eitan Jul 11 '20 at 13:05
  • @Alon Eitan thanks, is their any other way by which I can do this? – santosh Jul 11 '20 at 13:13
  • Not sure, because I tried to use some simple JS solutions and got a `Refused to display 'https://imgur.com/oIzrKK3' in a frame because it set 'X-Frame-Options' to 'deny'.` error. So I think that you could create a proxy script (Using any server-side language) that will download the file for you – Alon Eitan Jul 11 '20 at 13:18
  • I found a solution: https://jsfiddle.net/sdab98t3/ with the help of [this tutorial](https://blog.logrocket.com/programmatic-file-downloads-in-the-browser-9a5186298d5c/) (Reading blob content) and [this answer](https://stackoverflow.com/a/23013574/754119) – Alon Eitan Jul 11 '20 at 13:31

0 Answers0