HTML 页面转图片

Convert multiple HTML page elements into separate high-resolution images with customizable settings and automatic file naming.

Security Scan

The package mostly matches its stated purpose (HTML → images using Puppeteer), but the repo includes an extra standalone script with hardcoded workspace paths that deletes and reads files unexpectedly — this mismatch is suspicious and should be reviewed before installing or running.

Purpose & Capability

Most files (skill.json, index.js, lib/convert-pages.js, SKILL.md) coherently implement an HTML→image conversion skill using Puppeteer. However there is an additional top-level convert-pages.js that does not follow the skill inputs: it uses hardcoded paths under '../../workspace/xiaohongshu-output/.../OpenClaw 爆火.html' and writes/clears a sibling images directory. That hardcoded, non-parameterized behavior is not justified by the skill description and suggests leftover or targeted code.

Instruction Scope

SKILL.md describes copying the directory and calling execute() with parameters (no surprises). The library convert-pages.js matches that scope. But the standalone convert-pages.js at project root performs filesystem operations (rmSync to clear an OUTPUT_DIR, readFileSync on a hardcoded HTML file) and then immediately runs conversion; these actions are outside the documented inputs/parameters and could delete files in a workspace if executed.

Install Mechanism

No custom install script or remote archive downloads are present; installation is via npm and the package.json depends on puppeteer (registry npm). Puppeteer will download browser binaries during install/runtime, which is expected for this functionality.

Credentials

The skill declares no required environment variables or credentials, and the code does not read secrets or env vars. The remaining concern is filesystem access: the stray script accesses a specific workspace path outside the skill's declared input surface, which is a file-access mismatch but not credential exfiltration.

Persistence & Privilege

The skill does not request persistent/always-on privileges, does not modify other skills, and has normal agent-invocable settings. There is no evidence it writes agent config or requests permanent presence.

What to consider before installing

This package implements the claimed Puppeteer-based HTML→image conversion, but inspect and remediate the stray top-level convert-pages.js before installing or running it inside an agent. That file: (1) uses a hardcoded path into '../../workspace/.../OpenClaw 爆火.html', (2) force-deletes an OUTPUT_DIR with rmSync({ recursive: true }), and (3) immediately executes conversion without taking parameters. If you intend to use the skill, either remove/rename that stray script or verify its paths are safe and parameterized. Also run npm install in a sandbox (Puppeteer downloads browser binaries) and review package-lock if you need to audit dependencies. If you want, I can suggest a safe diff to remove or isolate the hardcoded script.

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 集成

1. 将整个目录复制到 Agent 的 skills 目录
2. 在 Agent 配置中引用此 skill
3. 通过 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'
});