将 Canvas 从 React Konva 导出到 SVG 和 PDF？

Question

目前，我只能使用

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

？

Answer 1

stage.toDataURL()

使用 canvas.toDataURL() API 进行导出。大多数浏览器仅支持

jpg

和

png

格式。

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

对于 PDF 导出，您可以使用外部库通过

stage.toDataURL()

方法生成带有图像的 PDF 文件。作为演示，请查看将 Konva 阶段保存到 PDF 演示。

Konva 库中没有用于导出 SVG 的内置方法。您必须编写自己的实现。如果您使用

Rect

、

Circle

和

Text

等基本形状，而不使用任何花哨的滤镜，那么编写此类转换应该不难，因为 SVG 规范中有类似的标签。

Answer 2

toDataUrl()

导出位图，而不是矢量。

您可以使用canvas2svg包生成svg。

您可以将 Layer 的上下文设置为等于 c2s 实例，渲染它，然后将 Layer 的引用重置为之前的值，如here所示。

Answer 3

Konva React 有一个库可以导出为 SVG， 似乎在我的项目中效果很好。

npm install react-konva-to-svg

链接

https://www.npmjs.com/package/react-konva-to-svg

https://github.com/dendrofen/react-konva-to-svg

该库包含将 Konva Stage 导出为 svg 的功能。 该库还支持导出前/导出后回调，以在处理导出到 svg 时修改阶段（例如阻止某些对象在 svg 中渲染）。

使用示例：

import { exportStageSVG } from 'react-konva-to-svg';

const stage = /* your Konva stage */;
const result = await exportStageSVG(stage, false, {
  onBefore: ([stage, layer]) => {
    // Perform actions before export
  },
  onAfter: ([stage, layer]) => {
    // Perform actions after export
  },
});

个人笔记

这个库似乎对 Konva.Arrow 组件有一些限制 - 在 svg 中无法正确渲染。无论如何，我已经设法解决这个问题，使用 Konva 矩形和直线节点创建自定义箭头组件）。