cross browser download image with javascript/jquery

Question

I have an image that i want to download.

I tried doing this with an iframe and it did not work. I tried doing it with a link with the HTML5 "download" attribute and it worked on chrome but on firefox it opend a new window.

my code:

var href = $("#largeImageContaier img").attr("src")

$("#dlpic").attr("href", href);
document.getElementById("dlpic").click()

html:

<a href="" id="dlpic" download="alternate-filename.png">

I want to download the image directly to the browser like the code above does in chrome but how do i make it do the same for other browsers, in this example firefox

The `download` attribute is only supported on some browsers. http://caniuse.com/#feat=download — DPac, Feb 09 '16 at 21:40
heh...:(. How do I implement this so it works on all browsers? I tried with an iframe but it just loads the picture inside of the iframe — ThunD3eR, Feb 09 '16 at 21:42
your options are very limited in this case. The iframe solution is the normal way of "fixing" this, but won't work because browsers know how to render images. You could have the server return the image with a mime type that the browser doesn't understand, but that's probably worse (and much more difficult) than telling the user to right click save as. — Kevin B, Feb 09 '16 at 21:50
This won't trigger a file download dialog, but for images, you could open a popup or something with ``. That way there would at least not be page movement. I think that solution is gross, but it might fit your need. — zero298, Feb 09 '16 at 21:53
What version of FireFox are you using? MDN says that anything better than [FireFox 20](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Browser_compatibility) should support `download`. I just tried in FF38 and it worked whenever I set the `href` to the file location rather than an empty string. — zero298, Feb 09 '16 at 22:08

zero298 · Answer 1 · 2016-02-09T22:34:31.197

2

If you're using FireFox, you should be able to use the download attribute

Try actually setting the href to something. After I did that, it worked in both Chrome and FireFox.

<a href="resource.html" download="The-name-I-want-to-use.html">Download</a>

MDN says that download is used for setting the name you want the resource to have when downloaded. You still need to provide a href.

Another thing to note about download according to MDN:

This attribute is only honored for links to resources with the same-origin.

If you want to check for download support without having to use any libraries, you can use:

var dlAttrSupported = (function () {
    return !!("download" in document.createElement("a"));
}());

edited Feb 09 '16 at 22:34

answered Feb 09 '16 at 22:11

zero298

25,467
10
75
100

my script code sets an href m8. "$("#dlpic").attr("href", href);" an url to cloudinary – ThunD3eR Feb 09 '16 at 22:14
When you say, "an url to cloudinary", that's on another domain right? That's important, because `download` is only honored for links to resources with the same-origin. – zero298 Feb 09 '16 at 22:20
thats another domain yes. – ThunD3eR Feb 09 '16 at 22:51

Matt · Answer 2 · 2016-02-09T22:15:53.470

0

From http://webdesign.tutsplus.com/tutorials/quick-tip-using-the-html5-download-attribute--cms-23880

You can use Modernizr to detect if the browser supports it and alternatively display instructions under the link to tell the user to 'right click and save as.'

if ( ! Modernizr.adownload ) {
    var $link = $('a');

    $link.each(function() {
        var $download = $(this).attr('download');

        if (typeof $download !== typeof undefined && $download !== false) {
          var $el = $('<div>').addClass('download-instruction').text('Right-click and select "Download Linked File"');
          $el.insertAfter($(this));
        }

    });
}

Here's a list of which browsers support the HTML5 download attribute: http://caniuse.com/#search=download

edited Feb 09 '16 at 22:15

answered Feb 09 '16 at 21:44

Matt

5,315
1
30
57

1

not really what i am looking for. modernizer might grant me the possibility to detect if the browser supports html5 "download" or not but it does not give me the desiered functionality. is there no crossrowser way? I want to point out that the href is url to another site, – ThunD3eR Feb 09 '16 at 21:49
If the browser doesn't support the HTML5 download attribute, you are out of luck. – Matt Feb 09 '16 at 22:14

cross browser download image with javascript/jquery

2 Answers2