programatically save an Image in HTML5/Java Script

Question

I am trying to have a button to save an image in png format. the image can be from a URL , from the resources or comming from a web api

I am a beginner in the web development world . I know that any button action can be done like this :

<input type="button" value="Save image"       onclick="saveimage();" />

or like this ( I am not sure which one is a better implementation)

<button type="button" onclick="saveimage();">Save Image</button>

I don t know what to put in the Javascript header to be able to save the image in png . any clue ?

thanks!

You have a visual-studio-2012 tag... Is this ASPX by any chance? — Rhs
– Rhs, Commented Feb 12, 2013 at 20:49
Do you have some other input controls that user can provide image? Is it always in .png or you might need to convert it? — Evaldas Dzimanavicius
– Evaldas Dzimanavicius, Commented Feb 12, 2013 at 20:50
@EvaldasDzimanavicius it will always be in a png format. When you say input control , what do you mean ? — user1415780
– user1415780, Commented Feb 12, 2013 at 20:56
@user1415780 you wrote: the image can be from a URL , from the resources or comming from a web api. How user will input those? — Evaldas Dzimanavicius
– Evaldas Dzimanavicius, Commented Feb 12, 2013 at 21:01

Evaldas Dzimanavicius · Accepted Answer · 2013-02-12 21:30:07Z

2

The only solution that I am aware of is this one:

<script> 
function saveImageAs (imgOrURL) {
    if (typeof imgOrURL == 'object')
      imgOrURL = imgOrURL.src;
    window.win = open (imgOrURL);
    setTimeout('win.document.execCommand("SaveAs")', 500);
  }
</script>
<body>

  <A HREF="javascript: void 0"
     ONCLICK="saveImageAs(document.anImage); return false" >
  save image</A>
  <IMG NAME="anImage" SRC="../apache_pb2.gif">
</body>

But it works only in IE. It would be different story if you would use server-side scripting (php, asp). Then you could set response headers to force user to download a file (get Save As.. dialog)

answered Feb 12, 2013 at 21:30

Evaldas Dzimanavicius

6457 silver badges16 bronze badges

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

5 Comments

user1415780 Over a year ago

Thank you for your feedback I tried to apply this method but ,even in IE , I get an error : once I click on the button it opens a new window saying "the resource cannot be found" and then a save dialog opens asking to save an htm page that returns to the same error page.... any clue ?

Evaldas Dzimanavicius Over a year ago

Just tried on my local machine - opens an image in a new window (IE9 and FF18). If you have "resource not found error" double check your src provided for the image and saveImageAs for onclick event should get document.ImageName as a parameter.

user1415780 Over a year ago

Thanks , I had a typo somewhwere and it works as you describe it :) to my understanding , to get a Save As dialog , I will need to use php or asp , is there a way to do this in javascript ?

user1415780 Over a year ago

I meant , saving it without having to open a new window

Evaldas Dzimanavicius Over a year ago

Not that I am aware of. To save without opening a new window you need to send a response with correct headers (set for file). JavaScript does not provide that kind of functionality.

Collectives™ on Stack Overflow

programatically save an Image in HTML5/Java Script

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related