pageres 完整指南：三步批量生成多分辨率网站截图

pageres 完整指南：三步批量生成多分辨率网站截图

【免费下载链接】pageresCapture website screenshots项目地址: https://gitcode.com/gh_mirrors/pa/pageres

pageres 是一个面向 Node.js 的网站截图库：给定一个或多个网址及其目标分辨率，它会启动无头浏览器，按各尺寸批量抓取页面。它适合前端开发、测试人员以及需要快速产出文档配图、宣传素材的用户，也可用于渲染 SVG 图像。当前 npm 版本为 9.0.0，MIT 协议，要求 Node.js 20 及以上。

功能清单：pageres 能做什么

除基础的多分辨率截图外，它对几类"不好截"的场景也有覆盖：

官方 README 给出的性能数据是：10 个不同网站共 100 张截图，耗时略超一分钟，足以应付 CI 里的批量任务。

三步快速上手

整个流程只有三步：

1. 安装：执行npm install pageres。想先看源码的话，克隆仓库：git clone https://gitcode.com/gh_mirrors/pa/pageres
2. 声明目标：创建Pageres实例，链式调用一个或多个.source(url, sizes, options?)或.sourceHtml(html, sizes)，声明"哪些页面、哪些尺寸"。第三个参数 options 可以覆盖构造器里的全局设置，方便按页面单独配置。
3. 运行：调用.destination('screenshots')指定输出目录，再调用.run()；它返回一个 Promise，resolve 为截图图片数据（Uint8Array 数组）。

仓库里的 example.js 是一个可直接参考的完整示例，全部参数的说明见 readme.md。

常用参数详解：五个高频场景

• 页面加载慢：delay（秒）用于等待动画或懒加载完成再截图；timeout默认 60 秒，超时自动中断请求。
• 固定尺寸海报：crop: true会把画面裁剪到设定高度，避免页面内容不足时画面被拉伸留白。
• 定期截图归档：filename支持date、time、url、size、crop等模板变量，配合incrementalName: true可保证历史文件永不被覆盖。
• 只截主体区域：用selector锁定内容容器，hide去掉广告等干扰项；更复杂的交互交给beforeScreenshot钩子，它接收 Puppeteer 的 Page 实例，可以在截图前点击"同意"按钮、等待指定元素出现。
• 深色模式 / 透明底：darkMode模拟深色配色偏好，transparent在页面未设置背景时输出透明背景，适合做图标和宣传素材。

完整参数类型定义与默认值见 source/index.ts 中的选项注释。

集成与生态

• 命令行用法：命令行版本是独立的 pageres-cli 项目，本仓库只提供库本身。
• 任务运行器：Grunt 用户可用 grunt-pageres 插件；Gulp、Broccoli 直接调用 API 即可，官方认为没必要再包一层。
• 底层实现：截图工作委托给依赖capture-website（基于 Puppeteer）完成；浏览器启动问题可通过launchOptions透传给puppeteer.launch()解决。
• 衍生项目：桌面应用 Break Shot 基于该库构建，用于响应式网站截图。

环境注意事项

• 要求Node.js 20+，见 package.json 的engines字段。
• Linux 用户：若报No usable sandbox!错误，需要按 Chrome 官方文档启用系统级沙箱，这是 README 中专门提示的常见坑。
• 仓库自带测试套件，覆盖各参数行为：本地起 HTTP 服务并用真实截图的像素尺寸做断言，见 test/。

下一步建议

1. 先跑一遍 example.js 的示例，对自己负责的站点做一次多分辨率截图。
2. 目标是响应式测试的话，建议挑 3~4 个尺寸，兼顾手机（如 480x320）与桌面（如 1920x1080）。
3. 若接入 CI，注意合理设置timeout与delay，避免用例偶发失败。

仓库当前没有公开的 CHANGELOG 文件，以上均为 9.0.0 版本的已实现能力；后续规划以项目后续的发布说明为准。

【免费下载链接】pageresCapture website screenshots项目地址: https://gitcode.com/gh_mirrors/pa/pageres