Export Mind Map as Image by ssshooter/mind-elixir-core
npx skills add https://github.com/ssshooter/mind-elixir-core --skill 'Export Mind Map as Image'Mind Elixir 推荐使用 @zumer/snapdom 进行高质量的图片导出。该工具允许您直接将 SVG 节点转换为图片格式。
将 @zumer/snapdom 安装为依赖项。
npm install @zumer/snapdom
使用 snapdom 函数捕获思维导图节点并下载它们。
import { snapdom } from '@zumer/snapdom'
// 假设 `mind` 是您的 MindElixir 实例
const downloadImage = async () => {
// 1. 捕获节点
const result = await snapdom(mind.nodes)
// 2. 下载为 JPG 或 PNG
await result.download({
format: 'jpg', // 或 'png'
filename: 'mind-map-export',
})
}
您可以在用户界面中添加一个按钮来触发此功能。
<button id="export-btn">导出图片</button>
<script>
document.getElementById('export-btn').addEventListener('click', downloadImage)
</script>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
注意:内置的
mind.exportSvg()方法已弃用。新项目请使用上述方法。
每周下载量
–
代码仓库
GitHub 星标数
3.0K
首次出现
–
安全审计
Mind Elixir recommends using @zumer/snapdom for high-quality image exports. This tool allows you to convert the SVG nodes directly into image formats.
Install @zumer/snapdom as a dependency.
npm install @zumer/snapdom
Use the snapdom function to capture the mind map nodes and download them.
import { snapdom } from '@zumer/snapdom'
// Assuming `mind` is your MindElixir instance
const downloadImage = async () => {
// 1. Capture the nodes
const result = await snapdom(mind.nodes)
// 2. Download as JPG or PNG
await result.download({
format: 'jpg', // or 'png'
filename: 'mind-map-export',
})
}
You can add a button to your UI to trigger this function.
<button id="export-btn">Export Image</button>
<script>
document.getElementById('export-btn').addEventListener('click', downloadImage)
</script>
Note : The built-in
mind.exportSvg()method is deprecated. Please use the method above for new projects.
Weekly Installs
–
Repository
GitHub Stars
3.0K
First Seen
–
Security Audits
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
109,600 周安装