【简介】
前面几个 Skill 生成的交互式 HTML 图表在网页上很好用，但当需要嵌入 PPT、Word、邮件，或分享到飞书、微信等不支持 HTML 的平台时，就需要静态图片了。手动截图分辨率低、比例不对、操作繁琐，批量导出时更痛苦。
本 Skill 作为上述图表技能族的配套工具，通过 Canvas API 将交互式图表/表格/甘特图等 HTML 渲染为 PNG / JPG / SVG 图片。支持单张导出、批量转换、多种尺寸预设（社交、PPT、打印），满足不同的分享和存档需求。
Chart to Image — 图表转图片 Skill
将交互式图表/表格/甘特图等转换为可下载的 PNG / JPG / SVG 图片。
作者：wuwenbin-beijing-st
使用说明
运行此 Skill 后，按以下步骤操作：
- 输入图表 HTML：粘贴图表的 HTML 代码、SVG 代码，或提供 Canvas 绘制代码
- 选择输出格式：PNG（透明背景）、JPG（白色背景）、SVG（矢量保留）
- 选择尺寸预设：标准、社交媒体、PPT 适配、打印高分辨率
- 配置参数：分辨率、质量、背景色等
- 生成图片：输出指定格式的图片文件供下载
输入格式建议
- 粘贴完整的 HTML 文件内容（含 SVG/Canvas）
- 或仅粘贴 SVG 代码段
- 或粘贴 Canvas 绘制 JavaScript 代码
场景-模式映射表
| 使用场景 | 推荐格式 | 尺寸预设 | 特点 |
|---|---|---|---|
| 网页/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） | 适中尺寸 | 文件小，白色底色 |
配色方案库
背景色选项
- 透明背景：适合嵌入网页 / App
- 白色背景：适合文档 / PPT / 邮件
- 暗色背景：适合深色模式展示
分辨率预设
| 预设 | 宽度 | 高度 | 适用 |
|---|---|---|---|
| 标准 | 800px | 自适应 | 通用 |
| 社交 | 1200px | 628px | 微信/公众号/微博 |
| PPT 16:9 | 1920px | 1080px | 演示文稿 |
| PPT 4:3 | 1440px | 1080px | 旧版演示文稿 |
| 高清打印 | 2400px | 自适应 | 300 DPI 打印质量 |
| 超高清 | 3840px | 自适应 | Retina 屏幕 |
交互增强包列表
基础交互
- 格式选择（PNG / JPG / SVG）
- 尺寸调整（宽度 + 自动高度，或固定宽高）
- 质量设置（JPEG 压缩率）
- 背景色切换
高级交互
- 批量处理（多图表队列导出）
- 水印添加（文字水印 / Logo）
- 预览对比（原图 vs 设置后）
- 裁剪（自定义区域选择）
限制说明
- 单文件 HTML：所有输出均为单一 HTML 文件，CSS 和 JS 全部内联
- 零外部依赖：不加载任何 CDN 资源、字体、图标库
- 渲染引擎：使用 Canvas API 进行渲染和位图转换
- SVG 导出：直接输出原始 SVG 代码，无需 Canvas 渲染
- 系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
- 浏览器兼容：Chrome/Firefox/Safari/Edge 最新两版
- 响应式布局：预览区域自适应
命令定义
/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