Webpage To Image — Development skill for Claude Code

Webpage to Image

**简体中文** | [English](./README.en.md)

把网页保存为整页高清长图。Chrome 扩展适合直接在浏览器中截图；原有 Claude Code 技能与命令行工具适合自动化使用。

Chrome 网页长截图扩展（已上架）

**[从 Chrome Web Store 安装「Webpage to Image · 网页长截图」](https://chromewebstore.google.com/detail/webpage-to-image-%C2%B7-%E7%BD%91%E9%A1%B5%E9%95%BF%E6%88%AA%E5%9B%BE/niphjimfdjfpfnaikofmhdaagamefodo)**

商店版已公开发布。在浏览器中点击即可生成长图，无需安装 Node.js 或注册扩展账号。推荐通过 Chrome Web Store 安装和更新。

• 整页长截图：保存网页中已经加载的内容，支持普通页面以及可识别的主要内部滚动区域。
• 自选布局宽度：当前宽度、700px、1000px，或 280–4000px 自定义宽度。
• 自选清晰度与格式：1×、2×、3× 图片像素倍数；PNG 或可调质量的 JPEG。
• 可选滚动加载：自动滚动，尝试触发图片等内容的懒加载。
• 预览后下载：查看长图、实际像素尺寸和文件大小，再保存到电脑。
• 本机处理：扩展不上传截图；临时缓存约一小时后清理，也可手动清除。已下载图片会保留。

使用步骤：从应用商店添加至 Chrome → 固定扩展图标 → 打开要截图的网页 → 选择参数并生成长图 → 预览、下载。

适用于桌面版 Chrome 118 及以上版本的普通 HTTP(S) 网页。无限滚动、虚拟列表和嵌入框架等特殊页面可能影响完整性，请先检查预览。

[查看 Chrome 扩展使用说明](./docs/chrome-extension.md) · [隐私政策](./docs/chrome-extension-privacy.md) · [问题反馈](https://github.com/pamelaaaaa1218/webpage-to-image/issues)

Claude Code 技能与命令行

把任意 **HTML 页面 / 网址** 用本机 Chrome 渲染成**整页高清长图**(PNG/JPG)的 Claude Code 技能(Skill)。

用真实浏览器渲染、所见即所得,通过提高像素倍数(2x/3x)解决「网页截图放大发糊」的问题。特别适合把做好的网页(学习笔记、海报页、报告页)导出成长图,发到**微信公众号 / 小红书 / 朋友圈**。

✨ 特性

• 🖼️ 本机 Chrome 无头渲染,不下载任何浏览器(用 puppeteer-core 驱动已装的 Chrome / Edge / Chromium)
• 📏 自动测量整页高度,不用手动指定
• 🔍 支持 2x / 3x 像素倍数,放大不糊
• 📱 自定义宽度:1000 电脑多栏版 / 700 手机竖版(单栏大字)
• ⏳ 自动等待字体加载、滚动触发懒加载 / 渐入动画,不会出现空白块
• 📦 输出后报告像素尺寸与文件体积(便于判断是否超过公众号 10MB 单图上限)

📥 安装

作为 Claude Code 个人技能使用:把本仓库克隆到 `~/.claude/skills/` 下,目录名保持 `webpage-to-image`:

git clone  ~/.claude/skills/webpage-to-image
npm install --prefix ~/.claude/skills/webpage-to-image   # 只装 puppeteer-core,不下载浏览器

之后在 Claude Code 里直接说「把这个网页截成高清长图」就会自动触发。

🚀 命令行直接用

node render.js \
  --input "" \
  --out   "<输出.png>" \
  --width 1000 \
  --scale 2

参数

参数	说明	默认
--input	本地 .html 路径,或 http(s):// 网址(本地起了 dev server 用网址)