如何从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 })

我希望能像Figma一样，将Canvas导出为svg和pdf。

我发现Data URIs，从中了解到MIME_types。在其中，他们写道application/pdf和image/svg+xml应该可以工作，但当我这样做时，仍然得到一个.png图像。

有没有办法在Konva中实现.svg和.pdf？

- deadcoder0904

Answer 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规范中有类似的标记。

- lavrton

---

有没有办法将文件导出为 .jpg 而不是 .jpeg？ - deadcoder0904

@deadcoder0904 这是同样的事情。你可以将文件命名/重命名为任何一个，但数据是相同的。 - Brian Leishman

@BrianLeishman 不知道这是同一件事。无论如何，我希望能有选择.jpg格式的选项，因为这是一个客户端的网络应用程序，我不认为在下载之前可以重命名它。 - deadcoder0904

Answer 2

toDataUrl() 导出的是位图，而不是矢量图。

您可以使用 canvas2svg 包生成 SVG。

您可以将图层的上下文设置为 c2s 实例，进行渲染，并将图层的引用重置为先前的状态，如 此处 所示。

- Max Hudson

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舞台导出为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 Rect和Line节点创建自定义的Arrow组件。

- Mark Kompanets