javascript - 如何使用 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 文档。

score 4 · Accepted Answer

以下内容必须为真：

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

score 4 · Accepted Answer

这对我很有效

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

score 2 · Accepted Answer

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

score -2 · Accepted Answer

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

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

确保为 ajax 调用设置 async:false

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

4 回答 4