javascript 如何使用 Fabric.js 将画布另存为图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23089088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Fabric.js to save a canvas as an image
提问by mheavers
I have a Fabric.js prototype where people can load photos, text, and maps into the canvas. When they're done, I want them to be able to save the canvas as an image. I've tried using the standard:
我有一个 Fabric.js 原型，人们可以在其中将照片、文本和地图加载到画布中。完成后，我希望他们能够将画布另存为图像。我试过使用标准：
canvasURL = canvas.toDataURL();
var image = new Image();
image.src = canvas.toDataURL("image/png");
$('#canvasContainer').replaceWith(image);
but it says that the canvas is tainted- I think because of the images (the method above works when it's just text). The error is:
但它说画布是tainted- 我认为是因为图像（当它只是文本时，上面的方法有效）。错误是：
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
I can use Fabric's built-in method to save as SVG:
我可以使用 Fabric 的内置方法来保存为 SVG：
var canvasSVG = canvas.toSVG();
$('#canvasContainer').replaceWith(canvasSVG);
But I'd rather have a PNG/JPG. Any ideas?
但我宁愿有一个 PNG/JPG。有任何想法吗？
Here's the Fabric.js documentation on serialization of the canvas.
这是有关画布序列化的 Fabric.js 文档。
采纳答案by Ray Nicholus
The following must be true:
以下内容必须为真：
- Your cross-domain
<img>elements must contain acrossoriginattribute. - The server hosting the images must return an Access-Control-Allow-Origin header in the response with either a wildcard, or your specific domain as the value.
- The browser must support CORS on
HTMLMediaElements, specificallyHTMLImageElements. This is only currently possible in Chrome, Firefox, and Opera 15+
- 您的跨域
<img>元素必须包含一个crossorigin属性。 - 托管图像的服务器必须在响应中返回一个 Access-Control-Allow-Origin 标头，并使用通配符或您的特定域作为值。
- 浏览器必须支持
HTMLMediaElements上的CORS ，特别HTMLImageElement是 s。这目前仅在 Chrome、Firefox 和 Opera 15+ 中可用
回答by Nick11
This works well for me
这对我很有效
function convertToImagen() {
canvas.deactivateAll().renderAll();
window.open(canvas.toDataURL('png'));
}
回答by JDrake
As a side note, remember that if you're developing on your local computer rather on a server, you will probably see this security error message.
附带说明一下，请记住，如果您在本地计算机上而不是在服务器上进行开发，您可能会看到此安全错误消息。
回答by melwyn pawar
I faced the same issue, solved it by first passing the image url in an ajax call to a php file that would convert the image and return a data url
我遇到了同样的问题，通过首先将 ajax 调用中的图像 url 传递给一个 php 文件来解决它，该文件将转换图像并返回数据 url
<?php
$content=file_get_contents($_POST['imageurl']);
echo "data:image/png;base64,". base64_encode($content);
?>
make sure to set the async:false for the ajax call
确保为 ajax 调用设置 async:false
you can use the returned data to create your image object and load it on canvas.
您可以使用返回的数据来创建图像对象并将其加载到画布上。
