Save HTML 5 canvas to a file in Chrome?

Question

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?

Solution 1

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());
}

Solution 2

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.