Save PNG (etc.) work in this demo in Firefox, but not Chrome.
Convert to PNG (etc.) work in Firefox and Chrome.
Is there a way *in Chrome* to save an image of a canvas element to a local file -- or to a server?
+2
A:
The simplest way to do it is to use the toDataURL() function.
Say you have a canvas:
var canvas = document.getElementById("myCanvas");
Then, with a button with id "saveButton", you can make it pop open a new window with the canvas as a png, and the user can save that page.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Timothy Armstrong
2010-05-22 16:47:24
Trouble with this is that (from Chrome) it gives an error: SECURITY_ERR: DOM Exception 18. I've found references to this error (http://lists.w3.org/Archives/Public/public-webapi/2006May/0027.html, for example), but no information about whether (or not) it's possible to get around it.
Sam Dutton
2010-05-22 17:43:31
I just discovered that the error occurs locally -- but not if the code is run on a server.However, I'm still looking for a way to provide a Save As dialog (like in Firefox) and not just open the PNG in a new window.
Sam Dutton
2010-05-22 17:57:45
I'm pretty sure that you can't cause the save dialog to appear; the best you could do is open up the resulting PNG in a new tab and have the user save. This is the behaviour I see in all of the canvas applications I've seen. Edited my response for window open.
Timothy Armstrong
2010-05-22 22:00:59
Or you can use server side to save the file on your computer. This is what Zwibbler does with their canvas saves: http://zwibbler.com/ And if you wait a bit longer, the HTML5 FileAPI will allow you to do disk saving.
Mohamed Mansour
2010-09-27 03:24:18
+1
A:
Sam Dutton: (regarding comment left in Timothy Armstrong's answer) The 'SECURITY_ERR: DOM Exception 18' error that you're getting is probably because in your Canvas you've loaded an image that comes from a different domain, eg. maybe the image is hosted on your server hence why you see the error locally but not when hosted on your server. Whenever you load images from a foreign domain into a Canvas, certain API calls are banned for security reasons such as toDataUrl() and getPixelData(). It's similar to the same origin policy issue you see with cross-domain Ajax calls.
As for SaveAs Canvas, browser implementation is spotty, for browsers that don't support it, I believe you can still have the canvas appear as an image inside an <img /> tag. Just set the src attribute to the data you get back from toDataUrl(), then you can invite the user to right click -> save as. I believe the demo in the link you posted does this.
Sunday Ironfoot
2010-05-24 07:25:11
Thanks for your comments. The security 'error' occurs when toDataURL() is run locally (i.e. not on a server). To build the content of the canvas element, I'm calling drawImage with a local video file as the source, i.e. like this: canvasContext.drawImage(videoEl, 0, 0, videoWidth / 2, videoHeight / 2);
Sam Dutton
2010-05-24 13:24:12
Are you sure the video file itself is local, and not coming from your server?
Sunday Ironfoot
2010-05-25 10:00:54
>> Are you sure the video file itself is local <<Yes: the video is in a local directory and accessed via a src path like this: 'video/myVideo.ogv'.
Sam Dutton
2010-05-26 05:49:53
Currently in Firefox the 'SECURITY_ERR' is thrown when the file protocol 'file:..' is used, but that is a bug - see https://bugzilla.mozilla.org/show_bug.cgi?id=444641To avoid this exception, you could simply run you page on a local Apache.But you are having this problem with Chrome?
toobb
2010-07-07 10:34:14
A:
can we do it using auto download box of firefox rather than opening it up in new tab and manually saving?
Nitesh
2010-09-26 23:16:00