mheavers mheavers - 1 year ago 893
Javascript Question

How to use Fabric.js to save a canvas as an image

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");

but it says that the canvas is
- 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();

But I'd rather have a PNG/JPG. Any ideas?

Here's the Fabric.js documentation on serialization of the canvas.

Answer Source

The following must be true:

  1. Your cross-domain <img> elements must contain a crossorigin attribute.
  2. 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.
  3. The browser must support CORS on HTMLMediaElements, specifically HTMLImageElements. This is only currently possible in Chrome, Firefox, and Opera 15+
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download