How to use Fabric.js to save a canvas as an image
canvas, cross-domain, fabricjs, javascript, todataurl
Solution
The following must be true:
- Your cross-domain `<img>` elements must contain a `crossorigin` attribute.
- The server hosting the images must return an Access-Control-Allow-Origin header in the response with either a wildcard, or your specific domain as the value.
- The browser must support CORS on `HTMLMediaElement`s, specifically `HTMLImageElement`s. This is only currently possible in Chrome, Firefox, and Opera 15+
Problem
I have a Fabric.js prototype where people can load photos, text, and maps into the canvas. When they're done, I want them to be able to save the canvas as an image. I've tried using the standard: ``` canvasURL = canvas.toDataURL(); var image = new Image(); image.src = canvas.toDataURL("image/png"); $('#canvasContainer').replaceWith(image); ``` but it says that the canvas is `tainted` - I think because of the images (the method above works when it's just text). The error is: ``` Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. ``` I can use Fabric's built-in method to save as SVG: ``` var canvasSVG = canvas.toSVG(); $('#canvasContainer').replaceWith(canvasSVG); ``` But I'd rather have a PNG/JPG. Any ideas? Here's the Fabric.js documentation on serialization of the canvas. http://fabricjs.com/fabric-intro-part-3/#serialization