HTML 页面转图片 Agent Skill\r

\r 一个 Agent Skill，用于将 HTML 文件中的多个页面元素转换为独立的图片文件。\r \r

📋 功能\r

\r

• ✅ 自动识别 HTML 中的页面元素（默认 .page 选择器）\r
• ✅ 为每个页面生成高清截图（2x 分辨率）\r
• ✅ 根据页面编号自动命名输出文件\r
• ✅ 支持自定义参数配置\r
• ✅ 可作为 Agent Skill 被调用\r \r

📦 安装\r

\r

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