如何使用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. 浏览器必须支持HTMLMediaElement s上的CORS，特别是HTMLImageElement s。目前只能在Chrome，Firefox和Opera 15 +
中使用

Answer 2

这对我很有用

function convertToImagen() {
  canvas.deactivateAll().renderAll();  
  window.open(canvas.toDataURL('png')); 
}

Answer 3

作为旁注，请记住，如果您在本地计算机上而不是在服务器上进行开发，则可能会看到此安全错误消息。

Answer 4

我遇到了同样的问题，通过首先将图像url在ajax调用中传递给php文件来解决它，该文件将转换图像并返回数据URL

<?php
$content=file_get_contents($_POST['imageurl']);
echo "data:image/png;base64,". base64_encode($content);
?>

确保为ajax调用设置async：false

您可以使用返回的数据创建图像对象并将其加载到画布上。