3

Currently, I can only use jpeg & png exports like:

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

I want to export Canvas to svg as well as pdf like Figma does it.

I found out about Data URIs which led to MIME_types. In there, they have written application/pdf & image/svg+xml should work but when I do that I still get a .png image.

Is there any way to achieve .svg & .pdf from Canvas in Konva?

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163

2 Answers2

2

stage.toDataURL() is using canvas.toDataURL() API to do the export. Most of the browsers support only jpg and png formats.

For SVG or PDF exports you have to write your own implementation.

For PDF exports you may use external libraries to generate a PDF file with an image from stage.toDataURL() method. As a demo take a look into Saving Konva stage to PDF demo.

There are no built-in methods for SVG exports in Konva library. You have to write your own implementation. If you use basic shapes such as Rect, Circle and Text without any fancy filters, writing such conversions shouldn't be hard, because there are similar tags in SVG spec.

deadcoder0904
  • 7,232
  • 12
  • 66
  • 163
lavrton
  • 18,973
  • 4
  • 30
  • 63
0

toDataUrl() exports a bitmap, rather than a vector.

You can generate an svg by using the canvas2svg package.

You can set your Layer's context equal to a c2s instance, rendering it, and resetting your Layer's ref to what it was previously, as shown here.

Max Hudson
  • 9,961
  • 14
  • 57
  • 107