HTML 页面转图片 Agent Skill
一个 Agent Skill，用于将 HTML 文件中的多个页面元素转换为独立的图片文件。
📋 功能
- ✅ 自动识别 HTML 中的页面元素（默认
.page选择器） - ✅ 为每个页面生成高清截图（2x 分辨率）
- ✅ 根据页面编号自动命名输出文件
- ✅ 支持自定义参数配置
- ✅ 可作为 Agent Skill 被调用
📦 安装
npm install🚀 使用方法
作为 Agent Skill 使用
import { execute } from './index.js';
const result = await execute({
htmlFile: 'xiaohongshu-articles.html',
outputDir: 'output',
pageWidth: 375,
pageHeight: 667,
selector: '.page'
});
console.log(result);直接运行
npm run convert或者：
node index.js📁 项目结构
.
├── index.js # Skill 主入口文件
├── skill.json # Skill 配置文件
├── lib/
│ └── convert-pages.js # 核心转换逻辑
├── convert-pages.js # 旧版脚本（保留兼容）
├── package.json
└── README.md⚙️ 参数配置
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
htmlFile | string | xiaohongshu-articles.html | HTML 文件路径（相对或绝对） |
outputDir | string | output | 输出图片的目录 |
pageWidth | number | 375 | 页面宽度（像素） |
pageHeight | number | 667 | 页面高度（像素） |
selector | string | .page | 要截图的页面元素选择器 |
📤 输出
所有图片将保存在 output 目录下，文件命名格式为：
page-01.png(封面页)page-02.png(第一个内页)page-03.png(第二个内页)- ...
📊 返回值
{
success: true,
message: "成功转换 7 个页面为图片",
data: {
images: ["output/page-01.png", "output/page-02.png", ...],
count: 7,
outputDir: "/path/to/output"
}
}🔧 作为 Agent Skill 集成
- 将整个目录复制到 Agent 的 skills 目录
- 在 Agent 配置中引用此 skill
- 通过
execute()函数调用，传入所需参数
📝 示例
// 使用默认配置
const result1 = await execute();
// 自定义 HTML 文件
const result2 = await execute({
htmlFile: './my-article.html'
});
// 完全自定义
const result3 = await execute({
htmlFile: '/absolute/path/to/article.html',
outputDir: './screenshots',
pageWidth: 800,
pageHeight: 1200,
selector: '.article-page'
});