Install
openclaw skills install @wwbwin/chart-to-imageopenclaw skills install @wwbwin/chart-to-image前面几个 Skill 生成的交互式 HTML 图表在网页上很好用,但当需要嵌入 PPT、Word、邮件,或分享到飞书、微信等不支持 HTML 的平台时,就需要静态图片了。手动截图分辨率低、比例不对、操作繁琐,批量导出时更痛苦。
本 Skill 作为上述图表技能族的配套工具,通过 Canvas API 将交互式图表/表格/甘特图等 HTML 渲染为 PNG / JPG / SVG 图片。支持单张导出、批量转换、多种尺寸预设(社交、PPT、打印),满足不同的分享和存档需求。
将交互式图表/表格/甘特图等转换为可下载的 PNG / JPG / SVG 图片。
作者:wuwenbin-beijing-st
运行此 Skill 后,按以下步骤操作:
| 使用场景 | 推荐格式 | 尺寸预设 | 特点 |
|---|---|---|---|
| 网页/App 嵌入 | png-export(PNG) | 原始尺寸 | 透明背景,保留透明度 |
| PPT / Keynote | presentation(PPT 适配) | 16:9 / 4:3 | 白色背景,适配幻灯片 |
| 微信/飞书分享 | social-size(社交媒体) | 1200×628 | 社交媒体推荐尺寸 |
| 打印/存档 | print-ready(打印高分辨率) | 300 DPI | 高清 300 DPI 以上 |
| 矢量编辑需要 | svg-export(SVG 保留) | 矢量无限 | 保留可编辑性 |
| 批量归档 | batch-export(批量导出) | 混合 | 多图表一次输出 |
| 文档插图 | jpg-export(JPG) | 适中尺寸 | 文件小,白色底色 |
| 预设 | 宽度 | 高度 | 适用 |
|---|---|---|---|
| 标准 | 800px | 自适应 | 通用 |
| 社交 | 1200px | 628px | 微信/公众号/微博 |
| PPT 16:9 | 1920px | 1080px | 演示文稿 |
| PPT 4:3 | 1440px | 1080px | 旧版演示文稿 |
| 高清打印 | 2400px | 自适应 | 300 DPI 打印质量 |
| 超高清 | 3840px | 自适应 | Retina 屏幕 |
/chart-to-image主入口命令。输入图表 HTML 或 SVG 代码,选择输出格式和尺寸后生成图片。
/chart-batch批量转换多个图表。支持一次性输入多个图表,按统一配置批量输出。
skills/chart-to-image/
├── SKILL.md
├── patterns/
│ ├── png-export.json # PNG 导出(透明背景)
│ ├── jpg-export.json # JPG 导出(白色背景)
│ ├── svg-export.json # SVG 保留(矢量)
│ ├── batch-export.json # 批量导出
│ ├── social-size.json # 社交媒体尺寸
│ ├── presentation.json # PPT 适配尺寸
│ └── print-ready.json # 打印高分辨率
└── templates/
├── base.html
├── png-export.html
├── jpg-export.html
├── svg-export.html
├── batch-export.html
├── social-size.html
├── presentation.html
└── print-ready.html