useExport图片导出问题

[liutaohz]

问题描述

在按照Xflow2.0文档使用useExport过程中；

• 图片导出（exportJPEG、exportPNG）会让一些自定义节点的border-box失效，圆角变成直角；
• exportJPEG导出的图片是png格式
  

重现链接

https://codesandbox.io/p/sandbox/xflow-demo-4n5lnd?file=%2Fsrc%2Finit-node.tsx%3A37%2C17&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clwh6cmw70006356hs29y54l9%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clwh6cmw60002356hecnkogg9%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clwh6cmw70003356hftm14375%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clwh6cmw70005356hi6ald8ir%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60.339441476773274%252C39.660558523226726%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clwh6cmw60002356hecnkogg9%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clwh6cmw60001356h8vmmk4g6%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A4%252C%2522startColumn%2522%253A23%252C%2522endLineNumber%2522%253A4%252C%2522endColumn%2522%253A23%257D%255D%257D%252C%257B%2522id%2522%253A%2522clwh8npes0002356h18ercwpk%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A37%252C%2522startColumn%2522%253A17%252C%2522endLineNumber%2522%253A37%252C%2522endColumn%2522%253A17%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252Finit-node.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522id%2522%253A%2522clwh6cmw60002356hecnkogg9%2522%252C%2522activeTabId%2522%253A%2522clwh8npes0002356h18ercwpk%2522%257D%252C%2522clwh6cmw70005356hi6ald8ir%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clwh6cmw70004356h5goomxtw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522clwh6cmw70005356hi6ald8ir%2522%252C%2522activeTabId%2522%253A%2522clwh6cmw70004356h5goomxtw%2522%257D%252C%2522clwh6cmw70003356hftm14375%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clwh6cmw70003356hftm14375%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

重现步骤

1. 进入页面
2. 点击“导出图片”按钮
3. 对比画布和导出图片的差异（开始节点和结束节点的圆角）

预期行为

我希望导出的图片和画布的图片尽量保持一致；画布中节点是圆角，导出图片中节点也应该是圆角；

平台

• 操作系统: [ Windows,]
• 网页浏览器: [Google Chrome]
• XFlow 版本: [2.0.4 ]

屏幕截图或视频（可选）

补充说明（可选）

No response

[zhangtinghang]

导出时，手动设置样式可解决

[liutaohz]

但是还是这样只是绕过问题，没有从根本上解决图片导出还原度不够的问题吧？

[xflow-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[liutaohz]

还是希望这个问题能够解决，如果优先级不高可以往后排，在未来的版本中解决

[xflow-bot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the AntV community! 💪💯

[xflow-bot]

Hey again!

It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot 🤖, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else.

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the AntV community! 💪💯