使用Javascript通过Firefox下载图像？

Question

I'm working on an extension for Firefox right now, written in javascript. Essentially when hovering over the thumbnail of an image (which when clicked on takes you to a webpage with the full image in it) the extension finds the URL of the full image and attempts to download it by way of a key press. ("D" in this instance.) The file's I'll be working with are typically .jpgs and .pngs, however .swfs and .mp3s may also be present. At this point I'm just looking to get the first two filetypes working.

The code I'm using right now is simply

function ExtendedDownload(image_src) {
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.download = image_src.split('/').pop().split('?')[0];
    a.href = image_src;
    a.click();
}

1. image_src is the URL to the image.
2. a.download is the filename of the image which is parsed from the full URL.

Earlier on in the javascript file it waits for the keypress when it sees that a valid thumbnail is being hovered over by the cursor. This part works perfectly fine. The downloading is what I'm having trouble with.

When loaded into chrome, this extension works perfectly as intended. However in Firefox (v49.0.2) it simply displays the image (akin to pasting the image's link in the address bar and pressing enter.) This is not the desired effect.

One solution I tested was converting the image to base64 through javascript and attempting to download that, which works in theory, and I've tested it will small base64 converted .pngs.. However the files I'm attempting to download result in base64 strings that are more than a megabyte in size and send the browser hanging so this isn't a valid option.

Every solution that I've run into on stackexchange for similar issues puts me back at this spot however, where "downloading" the image simply opens it in the browser.

Any suggestions would be appreciated.

Edit: The issue I'm having is definitely based on the fact that the webpage I'm using this extension on and the webpage the image is on are on different domains. @Mayank Pandeyz's solution has convinced me of this as when I try donwloading and image on the same domain as the page itself it works as intended. What are my potentials workaround for something like this?

Answer 1

Try this:

var a = document.createElement('a');
a.href = "/favicon.png";
a.download = "favicon.png";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

Demo Fiddle

Answer 2

you could do it like this in jquery.

where you give choice to user whether to download or not

   <a href="yourPath" class="download">download</a>


$('.download').click(function(){
           var url = $(this).attr('href');
           $(this).attr("target", "_blank");
            window.open(url,'Download');  
       });

here is a fiddle: https://jsfiddle.net/s1ojfbrt/2/

Answer 3

Your server shall have an option to supply the image with the following response headers:

Content-Type: application/octet-stream
Content-Disposition: attachment; filename="picture.png"

In this case browser will show Save As... dialog.

You can have special url/script on the server for that.