图表转图片

交互式图表转PNG/JPG/SVG图片，支持批量导出和多尺寸预设

【简介】

前面几个 Skill 生成的交互式 HTML 图表在网页上很好用，但当需要嵌入 PPT、Word、邮件，或分享到飞书、微信等不支持 HTML 的平台时，就需要静态图片了。手动截图分辨率低、比例不对、操作繁琐，批量导出时更痛苦。

本 Skill 作为上述图表技能族的配套工具，通过 Canvas API 将交互式图表/表格/甘特图等 HTML 渲染为 PNG / JPG / SVG 图片。支持单张导出、批量转换、多种尺寸预设（社交、PPT、打印），满足不同的分享和存档需求。

---

Chart to Image — 图表转图片 Skill

将交互式图表/表格/甘特图等转换为可下载的 PNG / JPG / SVG 图片。

作者：wuwenbin-beijing-st

使用说明

运行此 Skill 后，按以下步骤操作：

1. 输入图表 HTML：粘贴图表的 HTML 代码、SVG 代码，或提供 Canvas 绘制代码
2. 选择输出格式：PNG（透明背景）、JPG（白色背景）、SVG（矢量保留）
3. 选择尺寸预设：标准、社交媒体、PPT 适配、打印高分辨率
4. 配置参数：分辨率、质量、背景色等
5. 生成图片：输出指定格式的图片文件供下载

输入格式建议

• 粘贴完整的 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

批量转换多个图表。支持一次性输入多个图表，按统一配置批量输出。

文件结构

text

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