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

【问题标题】：How to use Fabric.js to save a canvas as an image如何使用 Fabric.js 将画布保存为图像
【发布时间】：2014-05-30 02:59:17
【问题描述】：

我有一个 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 文档。

【问题讨论】：

【解决方案1】：

以下必须为真：

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

【讨论】：

【解决方案2】：

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

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

确保为 ajax 调用设置 async:false

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

【讨论】：

这是有潜在危险的建议。没有理由将其设为同步调用。如果此请求花费大量时间，则这样做会打开锁定整个浏览器的可能性。请考虑更改您的答案。
我一直在开发一个应用程序，其中图像可以从文件夹、浏览器中拖放，或者可以从 Dropbox 帐户或 gdrive 中搜索，我首先识别相同域标志并将图像传递给如果从不同的域进行转换，是的，平均延迟为 3.5 秒，具体取决于图像大小，考虑到平均 2mb 和 512kbps 的下载速度，但我也按比例将自己的图像缩放到合理的大小。这运作良好到目前为止对我来说。请让我知道你的看法
底线是，永远不要在 Web Worker 之外的浏览器中使用同步 Ajax 请求。您所做的任何事情都不需要同步调用。

【解决方案3】：

这对我很有效

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

【讨论】：

【解决方案4】：

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

【讨论】：