如何使用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，特别是HTMLImageElement s上支持CORS。这目前仅在Chrome、Firefox和Opera 15中可用+

Answer 2

这对我来说很好

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

Answer 3

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

Answer 4

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

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

确保为ajax调用设置async：false

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