147

I need the browser to download the image files just as it does while clicking on an Excel sheet.

Is there a way to do this using client-side programming only?

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript" src="Scripts/jquery-1.10.2.js">
        $(document).ready(function () {
            $("*").click(function () {
                $("p").hide();
            });
        });
        </script>
    </head>

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

        function saveImageAs1(name, adress) {
            if (confirm('you wanna save this image?')) {
                window.win = open(adress);
                //response.redirect("~/testpage.html");
                setTimeout('win.document.execCommand("SaveAs")', 100);
                setTimeout('win.close()', 500);
            }
        }
    </script>

    <body>
        <form id="form1" runat="server">
            <div>
                <p>
                    <a href="http://localhost:55298/SaveImage/demo/Sample2.xlsx" target="_blank">Excel</a><br />
                    <a href="http://localhost:55298/SaveImage/demo/abc.jpg" id="abc">Image</a>
                </p>
            </div>
        </form>
    </body>
</html>

How should it work in case of downloading an Excel sheet (what browsers do)?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Amit
  • 1,489
  • 2
  • 10
  • 5

18 Answers18

214

Using HTML5 you can add the attribute 'download' to your links.

<a href="/path/to/image.png" download>

Compliant browsers will then prompt to download the image with the same file name (in this example image.png).

If you specify a value for this attribute, then that will become the new filename:

<a href="/path/to/image.png" download="AwesomeImage.png">

UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create <a href="https://i.imgur.com/IskAzqA.jpg" download> on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement

Leeroy
  • 2,003
  • 1
  • 15
  • 21
Richard Parnaby-King
  • 14,703
  • 11
  • 69
  • 129
  • Richard Parnaby-King:Using HTML 5 attribute it can be done ,but i need to do it WITHOUT using HTML5 or any SERVER SIDE tools(if is it possible to do) Thanks for helpers :) – Amit Jul 11 '13 at 10:26
  • 2
    Not fully supported in all browsers yet but it's a good solution if you don't care about IE or Safari. http://caniuse.com/#feat=download – stacigh Sep 23 '14 at 18:41
  • Thanks, for an HTML5 solution. How to still allow for 'save as' that let's me enter a file name before saving? – teleman Jul 22 '15 at 18:11
  • Can't I control where this file should be downloaded? It just downloads to download folder directly. I want it to use the local path of html file. – Arjun Dec 13 '16 at 19:29
  • 1
    @ArjunChiddarwar No, that opens up security vulnerabilities (imagine someone saving a malicious file directly into your Windows folder). The download path is based on the browser settings - for example by default Chrome will download to your downloads folder. – Richard Parnaby-King Dec 14 '16 at 10:20
  • 1
    Thanks for the heads up on the cross-origin stuff. Do you know if other browsers will be doing the same thing? Ugh.. I hate cross-origin. – Jeremy S. Apr 10 '18 at 20:44
136

I managed to get this working in Chrome and Firefox too by appending a link to the to document.

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
Roko C. Buljan
  • 196,159
  • 39
  • 305
  • 313
DrowsySaturn
  • 1,587
  • 1
  • 10
  • 4
  • 2
    This is actually a very nice solution for web-apps where Javascript is all around the place. Works only in Google Chrome (in my test setup), though. – Pavel Mar 13 '14 at 10:10
  • Any ideas on a way to test for compatibility? I'd like to use this technique but need to also support other browsers, so would need to offer an alternative (like open PDF in a new window, or a link to download) when this isn't supported. Has anyone had any luck with that? – alexrussell May 08 '14 at 13:48
  • 15
    Great solution, thanks! Note that if you omit `document.body.appendChild(link)` it won't work in firefox. It's also good to remove created element with `document.body.removeChild(link);` after `link.click()` – akn Jun 13 '14 at 11:55
  • 8
    best solution. To avoid garbage in DOM use `setTimeout( function () { link.parentNode.removeChild( link ); },10 );` – Mephiztopheles Apr 16 '15 at 08:42
  • This solution works for video as well. I tested it in Firefox and Chrome. Firefox decides to play the video on download, and it stores it in the /tmp directory (on Linux - which is where it was tested) rather than the "Downloads" directory. Chrome had no issues. – VectorVortec May 02 '15 at 20:32
  • 1
    Thanks should've been the selected answer since the question asked how to do it in JAVASCRIPT. – codehelp4 Sep 23 '18 at 02:25
  • 2
    NB1: This won't work locally due to CORS. NB2: In macOS Brave, this immediately saves the image. In iOS Safari, this produces a dialog asking whether you wish to view or save the image. If you save, it goes into a mysterious place accessible only within iOS Safari (I expected it to save to my Images app, details at https://macreports.com/how-to-manage-safari-downloads-on-iphone-and-ipad/). On iOS Brave, it just opens the image. – 2540625 Apr 25 '20 at 00:23
  • You can also add `element.style.display = 'none'` to ensure it doesn't affect the UI. – Fernando Rojo Sep 14 '21 at 19:43
59

Leeroy & Richard Parnaby-King:

UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}
iXs
  • 726
  • 5
  • 4
55

A more modern approach using Promise and async/await :

async function toDataURL(url) {
    const blob = await fetch(url).then(res => res.blob());
    return URL.createObjectURL(blob);
}

then

async function download() {
    const a = document.createElement("a");
    a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
    a.download = "myImage.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}

Find documentation here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Yoav Kadosh
  • 4,807
  • 4
  • 39
  • 56
Emeric
  • 6,315
  • 2
  • 41
  • 54
23

Update Spring 2018

<a href="/path/to/image.jpg" download="FileName.jpg">

While this is still supported, as of February 2018 chrome disabled this feature for cross-origin downloading meaning this will only work if the file is located on the same domain name.

I figured out a workaround for downloading cross domain images after Chrome's new update which disabled cross domain downloading. You could modify this into a function to suit your needs. You might be able to get the image mime-type (jpeg,png,gif,etc) with some more research if you needed to. There may be a way to do something similar to this with videos as well. Hope this helps someone!

Leeroy & Richard Parnaby-King:

UPDATE: As of spring 2018 this is no longer possible for cross-origin hrefs. So if you want to create on a domain other than imgur.com it will not work as intended. Chrome deprecations and removals announcement

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
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");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Riley Bell
  • 407
  • 4
  • 10
  • 1
    It looks like this code decodes the image into a buffer of pixels in browser memory, then reencodes it as jpeg/png/gif then encapsulates that into a data-uri which is then hopefully stored locally. If so, it means that all metadata from image file is lost. Also reencoding JPEG will lose some quality and have a worse quality/byte-count ratio. Still, good to know. Thanks for sharing. – Stéphane Gourichon Jun 18 '20 at 09:06
  • 1
    it downloads the image, but for my image from firebase storage, it says it is blocked by CORS policy but not for your image link. – Dipanshu Mahla Dec 22 '20 at 09:12
14
var pom = document.createElement('a');
pom.setAttribute('href', 'data:application/octet-stream,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);     
hakobpogh
  • 632
  • 6
  • 13
Sadi
  • 366
  • 3
  • 6
11

This is a general solution to your problem. But there is one very important part that the file extension should match your encoding. And of course, that content parameter of downlowadImage function should be base64 encoded string of your image.

const clearUrl = url => url.replace(/^data:image\/\w+;base64,/, '');

const downloadImage = (name, content, type) => {
  var link = document.createElement('a');
  link.style = 'position: fixed; left -10000px;';
  link.href = `data:application/octet-stream;base64,${encodeURIComponent(content)}`;
  link.download = /\.\w+/.test(name) ? name : `${name}.${type}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

['png', 'jpg', 'gif'].forEach(type => {
  var download = document.querySelector(`#${type}`);
  download.addEventListener('click', function() {
    var img = document.querySelector('#img');

    downloadImage('myImage', clearUrl(img.src), type);
  });
});
a gif image: <image id="img" src="data:image/gif;base64,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" />


<button id="png">Download PNG</button>
<button id="jpg">Download JPG</button>
<button id="gif">Download GIF</button>
hakobpogh
  • 632
  • 6
  • 13
  • 3
    Please add a short explanation to your answer, in order to make it relevant for the person who asked it – AGE Oct 13 '15 at 20:17
  • 1
    link.href = 'data:application/octet-stream,' + encodeURIComponent(address) this corrupts the file and hence cannot be opened, canu suggest why is it so – OM The Eternity Sep 06 '17 at 10:47
  • Yeah, this answer deserves to be the best one! The missing part for me was the "cleanUrl" thing, which was generating malformed data and breaking the file. – Iulian Pinzaru Mar 30 '20 at 21:43
  • Also keep in mind that in case that you pass a string containing dot(s) as a value of first argument to the function contained in the _downloadImage_ constant, the downloaded images will be _corrupted_ on operating systems such as Windows since the file extension won't be appended to the filename and therefore system won't be able to recognize how to open that file. Consequently, it may be better to set the value of _download_ field to the object contained in _link_ variable without ternary operator: `link.download = \`${name}.${type}\`;` – zeko868 May 26 '21 at 20:59
11

Create a function that recibe the image url and file name and call the funcion using a button.

function downloadImage(url, name){
      fetch(url)
        .then(resp => resp.blob())
        .then(blob => {
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            // the filename you want
            a.download = name;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        })
        .catch(() => alert('An error sorry'));
}
<button onclick="downloadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1280px-Stack_Overflow_logo.svg.png', 'LogoStackOverflow.png')" >DOWNLOAD</button>

Codepen.io Force image download with JavaScript

vladi.cc

Vladimir Salguero
  • 5,609
  • 3
  • 42
  • 47
7

You can directly download this file using anchor tag without much code.
Copy the snippet and paste in your text-editor and try it...!

<html>
<head>
</head>
<body>
   <div>
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg" width="200" height="200">
      <a href="#" download="https://upload.wikimedia.org/wikipedia/commons/1/1f/SMirC-thumbsup.svg"> Download Image </a>
   </div>
</body>
</html>
vinod
  • 535
  • 5
  • 10
5

In 2020 I use Blob to make local copy of image, which browser will download as a file. You can test it on this site.

enter image description here

(function(global) {
  const next = () => document.querySelector('.search-pagination__button-text').click();
  const uuid = () => Math.random().toString(36).substring(7);
  const toBlob = (src) => new Promise((res) => {
    const img = document.createElement('img');
    const c = document.createElement("canvas");
    const ctx = c.getContext("2d");
    img.onload = ({target}) => {
      c.width = target.naturalWidth;
      c.height = target.naturalHeight;
      ctx.drawImage(target, 0, 0);
      c.toBlob((b) => res(b), "image/jpeg", 0.75);
    };
    img.crossOrigin = "";
    img.src = src;
  });
  const save = (blob, name = 'image.png') => {
    const a = document.createElement("a");
    a.href = URL.createObjectURL(blob);
    a.target = '_blank';
    a.download = name;
    a.click();
  };
  global.download = () => document.querySelectorAll('.search-content__gallery-results figure > img[src]').forEach(async ({src}) => save(await toBlob(src), `${uuid()}.png`));
  global.next = () => next();
})(window);
Petr Tripolsky
  • 1,419
  • 15
  • 23
  • It looks like this code decodes the image into a buffer of pixels (canvas) in browser memory, then reencodes it as jpeg/png/gif then encapsulates that into a data-uri which is then hopefully stored locally. If so, it means that all metadata from image file is lost. Also reencoding JPEG will lose some quality and have a worse quality/byte-count ratio. Still, good to know. Thanks for sharing. – Stéphane Gourichon Jun 18 '20 at 09:10
  • 1
    Too cumbersome code. Unnecessary encoding\decoding and CPU usage. There are more elegant solutions above. Also - what if it was not an image but a video?...// – avalanche1 Nov 18 '20 at 16:19
2

Try this:

<a class="button" href="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg" download="smile.jpg">Download image</a>
Muhammad Awais
  • 4,238
  • 1
  • 42
  • 37
1

You can do

const urls = ['image.png', 'image1.png'];
urls.forEach((url) => {
   window.open(url, "_blank");
});
temirtator
  • 116
  • 1
  • 2
  • 8
1
    // Pass desired URL as a param
    function saveAs(uri) {
        fetch(uri)
            .then(res => res.blob()) // Gets the response and returns it as a blob
            .then(blob => {
                // Here, I use it to make an image appear on the page
                let objectURL = URL.createObjectURL(blob);
                let myImage = new Image();
                myImage.href = blob;
                myImage.download = generateFileName();
                //Firefox requires the link to be in the body
                document.body.appendChild(myImage);
                //simulate click
                myImage.click();
                //remove the link when done
                document.body.removeChild(myImage);
            });
    }

    // Generate filenames for the image which is to be downloaded
    function generateFileName() {
        return `img${Math.floor(Math.random() * 90000) + 10000}`;
    }
ixhimanshu
  • 77
  • 5
0
<html>
<head>
<script type="text/javascript">
function prepHref(linkElement) {
    var myDiv = document.getElementById('Div_contain_image');
    var myImage = myDiv.children[0];
    linkElement.href = myImage.src;
}
</script>
</head>
<body>
<div id="Div_contain_image"><img src="YourImage.jpg" alt='MyImage'></div>
<a href="#" onclick="prepHref(this)" download>Click here to download image</a>
</body>
</html>
Engr Saddam Zardari
  • 1,057
  • 1
  • 14
  • 27
0
<!DOCTYPE html>
<html>
<body>
<button onclick="forceDownload('http://localhost:4000/1-2-free-png-image.png','test.png')">Download</button>


<script>
    function forceDownload(url, fileName){
      var xhr = new XMLHttpRequest();
      xhr.open("GET", url, true);
      xhr.responseType = "blob";
      xhr.onload = function(){
          var urlCreator = window.URL || window.webkitURL;
          var imageUrl = urlCreator.createObjectURL(this.response);
          var tag = document.createElement('a');
          tag.href = imageUrl;
          tag.download = fileName;
          document.body.appendChild(tag);
          tag.click();
          document.body.removeChild(tag);
      }
      xhr.send();
}
</script>
</body>
</html>
HimalayanCoder
  • 9,630
  • 6
  • 59
  • 60
-6

I found that

<a href="link/to/My_Image_File.jpeg" download>Download Image File</a>

did not work for me. I'm not sure why.

I have found that you can include a ?download=true parameter at the end of your link to force a download. I think I noticed this technique being used by Google Drive.

In your link, include ?download=true at the end of your href.

You can also use this technique to set the filename at the same time.

In your link, include ?download=true&filename=My_Image_File.jpeg at the end of your href.

Mufasa
  • 72
  • 3
  • 2
    ?download=true is passed to Google Drive to tell their server to send the correct header to download the image. It isn't something that would work in any other environment unless it was specifically set up that way. – muncherelli Sep 10 '16 at 10:05
-7

What about using the .click() function and the tag?

(Compressed version)

<a id="downloadtag" href="examplefolder/testfile.txt" hidden download></a>

<button onclick="document.getElementById('downloadtag').click()">Download</button>

Now you can trigger it with js. It also doesn't open, as other examples, image and text files!

(js-function version)

function download(){
document.getElementById('downloadtag').click();
}
<!-- HTML -->
<button onclick="download()">Download</button>
<a id="downloadtag" href="coolimages/awsome.png" hidden download></a>
-18

You don't need to write js to do that, simply use:

<a href="path_to/image.jpg" alt="something">Download image</a>

And the browser itself will automatically download the image.

If for some reason it doesn't work add the download attribute. With this attribute you can set a name for the downloadable file:

<a href="path_to/image.jpg" download="myImage">Download image</a>
António Regadas
  • 714
  • 4
  • 11
  • A link to the image will only open the image in the same window, unless your browser is configured differently. The `download` attribute isn't supported in all browsers. – Design by Adrian Jun 30 '17 at 13:23