Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Download an image via button in javascript/html?

I've read through lots of questions here and tried a few things but none are working. What I want is for an image to be downloaded at the click of a button, but instead the image is opened in another tab briefly before closing again. Ideally I want to make the download automatic, but right now I want it just to work.

<script type="text/javascript">
  
    document.onclick = function (e) {
        e = e || window.event;
        var element = e.target || e.srcElement;
        if (element.innerHTML == "Image") {
            //someFunction(element.href);
            var name = element.nameProp;
            var address = element.href;
            saveImageAs1(element.nameProp, element.href);
            return false; // Prevent default action and stop event propagation
        }
        else
            return true;
    };
  
  var link = document.createElement('a');
  link.href = 'https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980';
  link.download = 'Download.jpg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  
    function saveImageAs1(name, adress) {
        if (confirm('CLICK')) {
            window.win = open(adress);
            setTimeout('win.document.execCommand("SaveAs")', 100);
            setTimeout('win.close()', 500);
        } 
    }

</script>

<body>
    <form id="form1" runat="server">
        <div>
            <p>
                <a href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" id="abc">Image</a>
            </p>
      
        </div>
    </form>
</body>
^This is code I got from a question mixed with someone's solution to that question, but the image doesn't download.
<html>
<header></header>
<body>
<a id="download_image" href="" download="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980">Download 1</a>
<a id="download_image" href="" download="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980">Download 2</a>
</body>
</html>

this version is based from a different answer, it downloads something but the downloads can't be opened or viewed.

For background info I'm coding in glitch, which is an online coding site kinda like repl, on a chromebook. is it possible the problems are due to what I'm using?

like image 262
D.og Avatar asked Jan 26 '26 09:01

D.og


1 Answers

You can try putting the image URL in href and download attribute like this?

<a id="download_image_1" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Download 1</a>
<a id="download_image_2" href="https://cdn.glitch.global/ab1f9eaf-3be9-411b-9fa4-81a39033290e/1650333182176.png?v=1650469623980" download>Download 2</a>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

But be aware while download is supported by modern browsers, Chrome is now ignoring the download attribute for cross-origin content. https://developer.chrome.com/blog/chrome-65-deprecations/#block-cross-origin-a-download

like image 192
Darren S Avatar answered Jan 28 '26 23:01

Darren S



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!