如何使用Fabric.js将画布保存为图像

Question

我有一个Fabric.js原型,人们可以将照片,文本和地图加载到画布中.当它们完成后,我希望它们能够将画布保存为图像.我尝试过使用这个标准:

canvasURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#canvasContainer').replaceWith(image);

但是它说画布是tainted- 我认为是因为图像(上面的方法只是文字时才有效).错误是:

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 

我可以使用Fabric的内置方法保存为SVG:

var canvasSVG = canvas.toSVG();
$('#canvasContainer').replaceWith(canvasSVG);

但我宁愿拥有PNG/JPG.有任何想法吗？

这是关于画布序列化的Fabric.js文档.

http://fabricjs.com/fabric-intro-part-3/#serialization

Answer 1

以下内容必须正确：

1. 您的跨域<img>元素必须包含一个crossorigin属性。
2. 托管图像的服务器必须在响应中返回 Access-Control-Allow-Origin 标头，并使用通配符或您的特定域作为值。
3. 浏览器必须支持HTMLMediaElements（特别是HTMLImageElements）上的 CORS。目前仅在 Chrome、Firefox 和 Opera 15+ 中可用