HTML 渲染为图片

要解决什么问题

很多场景需要把 HTML 布局 变成一张可分享的 PNG（公众号封面、文字卡片、产品信息图、图表截图、报告快照），而不是在浏览器里手动截屏。手工截图分辨率不一致、字体容易走样，批量产出时更不可控。

技能如何工作

本技能汇总 15+ 种 可复用的 HTML 渲染模板与脚本，核心路径是：准备 HTML（含 CSS / 内联样式）→ 按模板或脚本触发渲染 → 输出 高质量 PNG，并可指定分辨率。

• 样式：支持外部与内联 CSS，尽量贴近浏览器排版结果
• 字体：支持 中文字体 渲染，避免导出图乱码或回退字体
• 批量与版式：具备批量渲染能力；提供自动裁剪与边距控制，减少留白或裁切不一致

典型用法包括公众号封面、文字卡片、产品信息图、数据可视化导出，以及 HTML 报告转图片。

适用边界与注意点

渲染结果依赖 HTML/CSS 写法与字体环境；复杂动效、交互或强依赖实时 JS 的页面，不一定与「静态 PNG 快照」等价。关联工具 html-to-image-render 可与本技能脚本配合，但具体模板行为以各脚本约定为准。