Save Image Programmatically in HTML5 / Java Script
I am trying to create a button to save an image in png format. the image can be from a url, from resources or from a web page api
I am new to the world of web development. I know that any button action can be done like this:
<input type="button" value="Save image" onclick="saveimage();" />
or something like this (I'm not sure which one is better)
<button type="button" onclick="saveimage();">Save Image</button>
I don't know what to add to the Javascript header in order to save the image to png. any key?
thank!
+3
source to share
1 answer
The only solution I know of is this:
<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 only works in IE. It would be different if you were using server side scripts (php, asp). Then you can set the response headers to force the user to download the file (get the "Save As .." dialog)
+2
source to share