Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
124
rated 0 times [  125] [ 1]  / answers: 1 / hits: 18294  / 10 Years ago, tue, april 15, 2014, 12:00:00

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


More From » canvas

 Answers
4

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+


[#71450] Monday, April 14, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
ellisw

Total Points: 625
Total Questions: 92
Total Answers: 88

Location: Kazakhstan
Member since Mon, Sep 26, 2022
2 Years ago
ellisw questions
Mon, Aug 23, 21, 00:00, 3 Years ago
Fri, Nov 20, 20, 00:00, 4 Years ago
Sat, Jun 20, 20, 00:00, 4 Years ago
Tue, Apr 21, 20, 00:00, 4 Years ago
;