shiker

HTML 頁面轉圖片

開發程式設計v1.0.0
作者:shiker更新於 2026-05-17html-pages-to-images@clawhub_shiker1996/html-pages-to-images
指令碼工具

據 AlphaMoat 統計,截至 2026-09,HTML 頁面轉圖片 累計下載 1,900 次、獲 0 個星標,在全部 5,078 個 AI 技能中排名第 4,493 位,在「開發程式設計」分類(577 個)中排名第 537 位。

累計安裝
214
累計下載
1900
星標
-
全站排名
#4,493
全站前 89% · 「開發程式設計」前 94%
平台累計安裝累計下載星標評論
ClawHub ↗291059--
SkillHub ↗2141900-—

各平台的計數口徑不同,統計時間不一致。

這個技能是做什麼的

該技能描述按頁面選擇器識別元素、生成截圖並按頁面編號命名檔案的流程,也支援自定義引數。輸出效果取決於 HTML 內容、渲染環境和配置;這裡不表示已處理任何檔案。

資料釋出於 2026-10-27

可以用來做什麼

  • 從 HTML 頁面提取獨立圖片
  • 為網頁中的多個頁面區域生成截圖

什麼時候用

  • 需要把 HTML 頁面區域轉成圖片時
  • 需要批次儲存網頁內容截圖時

示例提示詞

以下是根據技能文件生成的示例,不代表實際執行結果。

將這個 HTML 檔案中的各個頁面區域分別匯出為圖片
為頁面截圖配置自定義選擇器和輸出命名

月度資料趨勢

累計下載1900
311116520182026-03 · 累計下載 4292026-05 · 累計下載 7352026-07 · 累計下載 11992026-08 · 累計下載 14892026-09 · 累計下載 190026-0326-09
星標-
0112026-03 · 星標 -2026-05 · 星標 -2026-07 · 星標 -2026-08 · 星標 -2026-09 · 星標 -26-0326-09

2026-09 起統計方法調整:同名技能按作者分別統計,並覆蓋全部技能。圖中虛線為調整前的月份,與之後的資料不直接比較,也不計算跨越調整的增長。

月份累計下載環比星標
2026-091900—-
2026-081489+24.2%-
2026-071199—-
2026-05735—-
2026-03429—-

SKILL.md 原文

以下是作者釋出的原始檔案,按純文字顯示,本站未做修改或稽核;其中的連結不可點選,命令請核實後再執行。抓取於 2026-10-23。

2.6 KB · ClawHub v1.0.0
# HTML 页面转图片 Agent Skill

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

## 📋 功能

- ✅ 自动识别 HTML 中的页面元素(默认 `.page` 选择器)
- ✅ 为每个页面生成高清截图(2x 分辨率)
- ✅ 根据页面编号自动命名输出文件
- ✅ 支持自定义参数配置
展開全部(共 120 行)
- ✅ 可作为 Agent Skill 被调用

## 📦 安装

```bash
npm install
```

## 🚀 使用方法

### 作为 Agent Skill 使用

```javascript
import { execute } from './index.js';

const result = await execute({
  htmlFile: 'xiaohongshu-articles.html',
  outputDir: 'output',
  pageWidth: 375,
  pageHeight: 667,
  selector: '.page'
});

console.log(result);
```

### 直接运行

```bash
npm run convert
```

或者:

```bash
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` (第二个内页)
- ...

## 📊 返回值

```javascript
{
  success: true,
  message: "成功转换 7 个页面为图片",
  data: {
    images: ["output/page-01.png", "output/page-02.png", ...],
    count: 7,
    outputDir: "/path/to/output"
  }
}
```

## 🔧 作为 Agent Skill 集成

1. 将整个目录复制到 Agent 的 skills 目录
2. 在 Agent 配置中引用此 skill
3. 通过 `execute()` 函数调用,传入所需参数

## 📝 示例

```javascript
// 使用默认配置
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'
});
```

「開發程式設計」分類下的熱門技能

資料月份:2026-09 · 下載/星標/安裝數聚合自公開技能註冊庫(ClawHub、SkillHub),按月更新。口徑說明見資料方法。