# capture-html

**Repository Path**: pojoin/capture-html

## Basic Information

- **Project Name**: capture-html
- **Description**: 一个使用 Rust 和 Chromiumoxide 编写的命令行工具，用于根据指定的 div id 截取 HTML 页面中特定元素的截图。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-20
- **Last Updated**: 2026-02-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# capture-html

一个使用 Rust 和 Chromiumoxide 编写的命令行工具，用于根据指定的 div id 截取 HTML 页面中特定元素的截图。

## 功能特性

- 🎯 精确截取指定 ID 的 HTML 元素
- 🖼️ 支持 PNG 和 JPEG 格式输出
- 🔍 自动查找系统中安装的 Chrome/Edge 浏览器
- ⚡ 轻量级，本程序仅占用约 6MB 内存
- 🚀 支持自定义 Chrome 可执行文件路径

## 系统要求

- Windows / Linux / macOS 操作系统
- 已安装 Google Chrome、Chromium 或 Microsoft Edge 浏览器
- Rust 环境（如需从源码编译）

## 安装

### 从源码编译

```bash
git clone <repository-url>
cd capture-html
cargo build --release
```

编译完成后，可执行文件位于 `target/release/capture-html.exe`

## 使用方法

### 基本用法

```bash
capture-html.exe <html文件> <div元素id> <输出图片路径>
```

### 示例

```bash
# 截取 test.html 中 id="dashboard" 的元素，保存为 output.png
capture-html.exe test.html dashboard output.png

# 指定 Chrome 路径
capture-html.exe test.html dashboard output.png --chrome-path "C:\Program Files\Google\Chrome\Application\chrome.exe"
```

### 参数说明

| 参数 | 说明 | 必填 |
|------|------|------|
| `html文件` | HTML 文件路径 | 是 |
| `div元素id` | 要截取的 div 元素 id | 是 |
| `输出图片路径` | 截图保存路径 | 是 |
| `--chrome-path` | Chrome 可执行文件路径（可选） | 否 |

### 输出格式

程序根据输出文件扩展名自动选择格式：
- `.png` → PNG 格式
- `.jpg` 或 `.jpeg` → JPEG 格式

## 性能测试

### 运行速度

在标准测试环境下（Windows + Chrome）：

| 指标 | 数值 |
|------|------|
| 平均耗时 | ~2.4 秒 |
| 最快 | 2.10 秒 |
| 最慢 | 3.07 秒 |

运行时间主要包括：
- 启动 Chrome 浏览器 (~0.5-1 秒)
- 加载 HTML 页面 (~0.3 秒)
- 等待页面渲染 (~1.5 秒)
- 截图保存 (~0.1 秒)

### 内存占用

| 进程 | 工作集内存 | 分页内存 |
|------|-----------|---------|
| capture-html (本程序) | ~6 MB | ~2.5 MB |
| chrome (浏览器) | ~13 MB | ~7.9 MB |

## 测试示例

项目中包含一个测试 HTML 文件 `test.html`，展示了一个漂亮的数据仪表盘：

```bash
# 运行测试
cargo run -- test.html dashboard output.png
```

测试页面包含：
- 渐变背景的数据仪表盘
- 统计数据卡片（总用户、增长率、月收入）
- 柱状图展示区域

截图将只捕获 `id="dashboard"` 的区域内容。

## 浏览器查找顺序

程序按以下顺序自动查找浏览器：

### Windows
1. `C:\Program Files\Google\Chrome\Application\chrome.exe`
2. `C:\Program Files (x86)\Google\Chrome\Application\chrome.exe`
3. `C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe`
4. `C:\Program Files\Microsoft\Edge\Application\msedge.exe`

### Linux
1. `/usr/bin/google-chrome`
2. `/usr/bin/google-chrome-stable`
3. `/usr/bin/chromium-browser`
4. `/usr/bin/chromium`
5. `/snap/bin/chromium`
6. `/opt/google/chrome/chrome`
7. `/usr/bin/microsoft-edge`
8. `/usr/bin/msedge`

### macOS
1. `/Applications/Google Chrome.app/Contents/MacOS/Google Chrome`
2. `/Applications/Chromium.app/Contents/MacOS/Chromium`
3. `/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge`

### 通用
- 环境变量 `CHROME_PATH` 指定的路径（优先级最高）

## 技术栈

- **Rust** - 系统编程语言
- **chromiumoxide** - Chrome DevTools Protocol 客户端
- **tokio** - 异步运行时
- **clap** - 命令行参数解析
- **anyhow** - 错误处理

## 优化建议

如需提升运行速度，可考虑：

1. **减少等待时间**：修改代码中的等待时间（默认 2 秒）
2. **复用浏览器实例**：批量截图时保持浏览器打开状态
3. **使用 headless 模式**：已在默认配置中启用

## 许可证

MIT License

## 贡献

欢迎提交 Issue 和 Pull Request！