Agent Skills
返回列表
HTML 转图片

HTML 转图片

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中:

请根据 https://skillhub.cn/install/skillhub.md,安装 @user_fac53e4e/html-to-image-page。

技能介绍

要解决的问题

把 HTML 报告、图表容器或模板快速变成可分享的图片并不轻松:对方环境可能缺字体和样式,手动开浏览器截图又难以保证分辨率、格式与透明背景一致,且自动化处理时常遇到字体未加载或布局抖动的问题。

核心能力与执行逻辑

  • 基于 Playwright 驱动无头 Chromium,按浏览器真实布局与字体渲染,原生支持 CSS、Flex/Grid、Web 字体与内联 SVG,输出等效于浏览器打开后的截图。
  • 输入支持内联字符串或本地文件,输出 PNG / JPG。通过 --hq 可一键拉高至 scale>=3.0 且 quality>=95,或使用 --target-width 保证最小输出宽度,避免小图模糊。
  • 渲染前显式等待 document.fonts.ready 并支持 --wait 额外稳定等待,确保动画与异步布局落定;PNG 可用 --bg transparent 输出 alpha 通道,JPG 默认白底。
  • 成功回执会解析图片头部并返回真实像素尺寸 resolution=WxHpx,便于直接核对清晰度是否达标。

适用边界与注意点

  • 仅接受用户提供的 HTML 文本或文件,不爬取外部真实网站,也不做整站抓取。
  • 不干预业务层的颜色约定(如股票红涨绿跌),颜色完全由传入的 HTML/CSS 决定。
  • JPG 格式无透明通道,默认以白底渲染;若依赖环境未安装浏览器,脚本会返回明确的退出码与提示,需先解决依赖再重试。

使用场景

  • 把用 HTML+CSS 生成的数据报表或 ECharts 图表渲染成 PNG,直接贴入文档或邮件,避免对方缺字体样式。
  • 用一段带样式的 HTML 模板(标题+封面+二维码)一键产出社交分享卡或 OG 预览图,并控制尺寸与清晰度。
  • 将手写或模型生成的 HTML 原型片段截图成图,在对话中快速回传视觉效果,无需手动开浏览器。
  • 需要把带圆角或图标的组件设计稿以透明背景 PNG 导出,叠到其他底图上使用,避免白边。

适合人员

  • 数据分析师:把交互式 HTML 报表固定成静态图片,嵌入周报或分享给不用前端的同事。
  • 前端开发者:在写代码阶段快速把 HTML 片段渲染成图,用于评审或提交截图,省去手动开浏览器截图。
  • 内容运营:根据设计好的 HTML 模板批量生成带二维码的社交分享卡片或 Open Graph 预览图。
  • 文档工程师:把带样式的代码示例或组件预览渲染成 PNG,插入技术文档避免读者环境差异导致样式错乱。