将画布从 React Konva 导出为 SVG 和 PDF？

Posted 2023-03-25

【中文标题】将画布从 React Konva 导出为 SVG 和 PDF？

【英文标题】：Export Canvas from React Konva to SVG & PDF?

【发布时间】：2021-04-11 02:42:14

【问题描述】：

目前，我只能使用jpeg & png 导出，例如：

stageRef.current?.getStage().toDataURL( mimeType: 'image/jpeg', quality: 1 )
stageRef.current?.getStage().toDataURL( mimeType: 'image/png', quality: 1 )

我想将 Canvas 导出到 svg 和 pdf，就像 Figma 一样。

我发现了Data URIs，这导致了MIME_types。在那里，他们写了application/pdf 和image/svg+xml 应该可以工作，但是当我这样做时，我仍然得到.png 图像。

有什么方法可以在 Konva 的 Canvas 中实现 .svg 和 .pdf？

【参考方案1】：

stage.toDataURL() 正在使用canvas.toDataURL() API 进行导出。大多数浏览器仅支持jpg 和png 格式。

对于 SVG 或 PDF 导出，您必须编写自己的实现。

对于 PDF 导出，您可以使用外部库从 stage.toDataURL() 方法生成带有图像的 PDF 文件。作为演示，请查看Saving Konva stage to PDF demo。

Konva 库中没有用于 SVG 导出的内置方法。您必须编写自己的实现。如果您使用Rect、Circle 和Text 等基本形状而没有任何花哨的过滤器，那么编写这样的转换应该不难，因为在 SVG 规范中有类似的标签。

【讨论】：

无论如何导出为.jpg而不是.jpeg？

@deadcoder0904 那是一回事。您可以将文件命名/重命名为任何一个，但数据是相同的。

@BrianLeishman 不知道这是同一回事。在任何情况下，我都希望可以选择.jpg 格式，因为它是一个客户端网络应用程序，而且我认为在下载之前我不能重命名它。