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

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

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

但是它说画布被污染了，我认为是因为图像（当它只是文本时，上面的方法是有效的）。错误是：

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文档

---

以下内容必须正确：

您的跨域

元素必须包含

crossorigin

属性

承载映像的服务器必须在响应中返回一个Access Control Allow Origin标头，并使用通配符或您的特定域作为值

浏览器必须支持

HTMLMEDIALEMENT

s上的CORS，特别是

HTMLImageElement

s。目前只有在Chrome、Firefox和Opera 15中才能实现这一点+

---

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

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

确保为ajax调用设置async:false

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

这对我来说很好

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

---

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

注意：这在Safari 7中也是可能的。这是一个潜在危险的建议。没有理由将此设置为同步调用。如果此请求需要花费相当长的时间，那么这样做将打开锁定整个浏览器的可能性。请考虑更改您的答案。我一直在研究一个应用程序，其中可以从文件夹、浏览器中拖拽图像，或者可以从Dropbox帐户或GDREST中搜索，首先识别SAMEDMOMIN标志，并通过不同的域传递图像以进行转换。是的，平均延迟3.5秒取决于图像大小，考虑到平均2mb和512kbps的下载速度，但我也按比例将自己的图像缩放到合理的大小。到目前为止，这对我来说效果很好。请让我知道你的视图底线是，切勿在web workers之外的浏览器中使用同步Ajax请求。你正在做的任何事情都不需要同步呼叫。由于我的声誉，我无法发表评论。