How to save an image via JavaScript

Question

I want to download a image file (jpeg image) to the user files system when user selects a photo and clicks a button. So far I searched and found this link and also this

I saw in one blog that downloadify when used with jszip can enable this feature but it didn't specify any farther on this. Does any one know how to download the images. I have the links to the images and i just want the user to download it on his system rather than again query the server.

Can anyone provide me with an example please.

yeah i already saw that ...I mentioned clearly in my question that it is for image file not text file — Nav
– Nav, Commented Sep 2, 2012 at 18:24
I have tried jszip but couldn't get it in the correct format...i provided the link in the question — Nav
– Nav, Commented Sep 2, 2012 at 18:25

Andrii Verbytskyi · Accepted Answer · 2017-02-23 15:12:06Z

7

Use the HTML5 download attribute.

As a choice you can set filename as an attribute value.

<a href="/images/image-name.jpg" download="new-image-name.jpg">

answered Feb 23, 2017 at 15:12

Andrii Verbytskyi

7,6913 gold badges51 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zeyad Shaban Over a year ago

When the download link is from a website like pixabay it opens it in the same tab and returns 403 unauthorised as it need authentication

Andreas Köberle · Accepted Answer · 2012-09-02 19:01:24Z

5

You can load the image in an canvas element get the data url of the canvas and open a new window with the data url as source. Take a look at this example: https://gist.github.com/1875132

answered Sep 2, 2012 at 19:01

Andreas Köberle

112k58 gold badges281 silver badges308 bronze badges

3 Comments

Nav Over a year ago

thank you for the comment..i will try it out :) ...by the way I am using a normal img tag will this code work for img tag or does it ony work for canvas tag ?

Andreas Köberle Over a year ago

The problem is that you cant get the data url for an image tag. Thats way you need to convert it to a canvas first.

Nav Over a year ago

can u plz explain what data url is ...I am kinda noob to this stuff :( Actually I am making a website which is integrated with facebook and facebook passes me the link to the image(jpeg) by using graph api.The image retrieval code is here in this link stackoverflow.com/questions/12234853/…

Stjepan Suton · Accepted Answer · 2023-07-24 08:15:11Z

2

Needed for a project to make a custom context(right-click) menu with a custom download image button.

Here is an answer using pure javascript:

const imageElement = document.getElementById("YourImage").getAttribute("src");

const saveImage = (downloadUrl: string) => {
    const downloadImage = document.createElement("a");
    document.body.appendChild(downloadImage);
    downloadImage.setAttribute("download", "image");
    downloadImage.href = downloadUrl;
    downloadImage.click();
    downloadImage.remove();
};

saveImage(imageElement)

answered Jul 24, 2023 at 8:15

Stjepan Suton

1231 gold badge1 silver badge6 bronze badges

Comments

Nav · Accepted Answer · 2013-05-24 12:29:37Z

1

Finally I did it. For anyone who may need this in the future here is how I did it using jquery

jQuery.ajax({

    url: 'http://localhost:8080/yourwebsite/servlet?img=' + document.getElementById(id).alt,
    //data: myData,
    type: 'GET',
    crossDomain: true,
    dataType: 'jsonp',
   // success: function() { alert("Success"); },
   // error: function() { alert('Failed!'); },
   // beforeSend: setHeader
});

this I had to do come across the problem of cross domain http requests which are usually blocked by most websites unless you follow some lengthy process. So, I made it simpler and called a get method in my servlet and passed it the url of the image from which it downloaded the image.This is much easier to do and even easier then this if you are on the same domain but that didn't meet my requirements and this code worked for me :)

edited May 24, 2013 at 12:29

answered Sep 7, 2012 at 19:01

Nav

10.5k21 gold badges61 silver badges83 bronze badges

3 Comments

user4287698 Over a year ago

Will your code work in my condition ?

Mahmut215 Over a year ago

Id is image id? Or what

Zeyad Shaban Over a year ago

@Mahmut215 it's just the url for the image

Collectives™ on Stack Overflow

How to save an image via JavaScript

4 Answers 4

1 Comment

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related