HTML 转图片
将以下提示词粘贴到你的 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,插入技术文档避免读者环境差异导致样式错乱。