7

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

4

4 回答 4

4

以下内容必须为真:

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

这对我很有效

function convertToImagen() {
  canvas.deactivateAll().renderAll();  
  window.open(canvas.toDataURL('png')); 
}
于 2015-08-13T21:28:22.323 回答
2

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

于 2016-06-11T19:47:51.620 回答
-2

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

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

确保为 ajax 调用设置 async:false

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

于 2014-04-21T09:47:24.410 回答