CODEWITHSUNDEEP
javascripthtml
user1415780
user1415780

Reputation: 1153

programatically save an Image in HTML5/Java Script

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!

Upvotes: 3

Views: 1279

Answers (1)

Evaldas Dzimanavicius
Evaldas Dzimanavicius

Reputation: 645

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)

Upvotes: 2

Related Questions