图片导出时，使用自定义vue节点绘制的svg不能被导出

[Huzi-y]

Describe the bug

在自定义的vue节点内部，如果使用了svg，在导出图片的时候会出现空白情况。导出svg是正常的。

Your Example Website or App

https://codesandbox.io/s/vue-shape-forked-yvr0fk?file=/src/components/Count.vue

Steps to Reproduce the Bug or Issue

单击保存图片

Expected behavior

生成完整的png图片

Screenshots or Videos

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[DanielLeefu]

看起来和这个issues#1443相似，图片使用base64试下呢

[Huzi-y]

看起来和这个issues#1443相似，图片使用base64试下呢

我试了下，用base64是可以了，这个是什么原理😥

[Huzi-y]

@DanielLeefu 复杂的svg，包含了defs标签，使用base64方式好像不能绘制出来。节点里面如果绘了一个图表，图表是用canvas绘制的话，导出的图片节点也是一片空白。

[komagic]

用blob 导出就行了。x6自带的不好使，用html to image 和blob

[NewByVector]

@komagic 有什么好的库推荐使用吗

[komagic]

@komagic 有什么好的库推荐使用吗

用 html-to-image toBlob 导出即可

[komagic]

这个是react 节点的圆形，x6自带的会卡一下，然后下载出来是空的。

用我上面提到的即可解决

[Huzi-y]

[ ![abc]这个是react 节点的圆形，x6自带的会卡一下，然后下载出来是空的。

用我上面提到的即可解决
我用了 html-to-image 的 toBlob导出的图片直接节点都不绘了😭

[Huzi-y]

我是用vue绘的节点

[komagic]

哪里保存不了？

https://codesandbox.io/s/vue-shape-forked-jo52ct?file=/src/App.vue

[komagic]

这个与vue react没关系，最终生成的都是html

[Huzi-y]

这个与vue react没关系，最终生成的都是html

应该是我用的有问题，我是把blob转file，不知道为什么节点没绘出来。

[Huzi-y]

这个与vue react没关系，最终生成的都是html

我知道为什么了，我开启了滚动，截的图片在滚动条最前面开始截的，导致没显示到节点的位置

[Huzi-y]

通过类名（x6-graph-svg）获取到节点去生成图片就好了。

[chengup-git]

通过类名（x6-graph-svg）获取到节点去生成图片就好了。

应该是这个导致的，只有svg元素才行，我用上一级的container不行，下一级的x6-graph-svg-viewport也不行，然后看了下文档，发现是这个原因

[oyal]

使用html-to-image导出的的大小为整个画布，有没有只导出渲染区域的方案？

[komagic]

我记得x6是有一个让内容自适应的一个功能类似autofit，自适应后，内容差不多就占满整个画布可视区了，然后你再导出 发自我的iPhone

…

------------------ 原始邮件 ------------------ 发件人: oyal ***@***.***> 发送时间: 2023年11月21日 17:08 收件人: antvis/X6 ***@***.***> 抄送: Jackie ***@***.***>, Mention ***@***.***> 主题: Re: [antvis/X6] 图片导出时，使用自定义vue节点绘制的svg不能被导出 (Issue #2423) 使用html-to-image导出的的大小为整个画布，有没有只导出渲染区域的方案？ — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[oyal]

@komagic 我目前是做的一个自动保存缩略图的功能，用graph.zoomToFit()也不太好，会改变画布缩放以及画布位置😭

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.