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]

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