以各种分辨率捕获网站的屏幕截图。确保您的网站具有响应性的好方法。它速度很快，只需一分钟多一点就可以从 10 个不同的网站生成 100 个屏幕截图。它还可以用于渲染 SVG 图像。

有关命令行工具，请参阅pageres-cli。

安装

$ npm install pageres

Linux 用户注意事项：如果您收到“No usable sandbox！” 错误，您需要启用系统沙箱。

用法

const Pageres = require('pageres');

(async () => {
	await new Pageres({delay: 2})
		.src('https://github.com/sindresorhus/pageres', ['480x320', '1024x768', 'iphone 5s'], {crop: true})
		.src('https://sindresorhus.com', ['1280x1024', '1920x1080'])
		.src('data:text/html,<h1>Awesome!</h1>', ['1024x768'])
		.dest(__dirname)
		.run();

	console.log('Finished generating screenshots!');
})();

应用程序接口

Pageres（选项？）

选项

类型： object

延迟

类型：（number 秒）

默认值：0

延迟截屏。

当站点在加载后执行您想要捕获的操作时很有用。

暂停

类型：（number 秒）

默认值：60

请求中止的秒数。

庄稼

类型：boolean

默认：false

裁剪到设定的高度。

css

类型： string

将自定义 CSS 应用于网页。指定一些 CSS 或 CSS 文件的路径。

脚本

类型： string

将自定义 JavaScript 应用到网页。指定一些 JavaScript 或文件的路径。

饼干

类型： Array<string | object>

与浏览器 cookie或对象格式相同的字符串。

提示：转到您想要 cookie 的网站，然后从 DevTools 复制粘贴它。

文件名

类型：string

默认：'<%= url %>-<%= size %><%= crop %>'

使用Lo-Dash 模板定义自定义文件名。

例如：<%= date %> - <%= url %>-<%= size %><%= crop %>。

可用变量：

• url: slugified形式的 URL ，例如。http://yeoman.io/blog/变成yeoman.io!blog
• size：指定尺寸，例如。 1024x1000
• width: 指定尺寸的宽度，例如。 1024
• height: 指定尺寸的高度，例如。 1000
• crop:-cropped当裁剪选项为真时输出
• date: 当前日期 (YYYY-MM-DD)，例如。2015-05-18
• time：当前时间（HH-mm-ss），例如。21-15-11

增量名称

类型：boolean

默认：false

当文件存在时，附加一个增量编号。

选择器

类型： string

捕获匹配 CSS 选择器的特定 DOM 元素。

隐藏

类型： string[]

隐藏与 CSS 选择器匹配的 DOM 元素数组。

用户名

类型： string

用于使用 HTTP 身份验证进行身份验证的用户名。

密码

类型： string

用于使用 HTTP 身份验证进行身份验证的密码。

规模

类型：number

默认：1

缩放网页n时间。

格式

类型：string

默认值：png

值：'png' | 'jpg'

图片格式。

用户代理

类型： string

自定义用户代理。

标题

类型： object

自定义 HTTP 请求标头。

透明的

类型：boolean

默认：false

如果没有设置背景transparent，white则将背景颜色设置为而不是。

暗模式

类型：boolean

默认：false

模拟对深色方案的偏好。

启动选项

类型：object

默认：{}

选项传递给puppeteer.launch().

pageres.src（网址，大小，选项？）

添加页面截图。

网址

所需

类型：string

要截屏的网站的 URL 或本地路径。您还可以使用数据 URI。

尺寸

所需

类型：string[]

使用<width>x<height>符号或关键字。

关键字是此列表中设备的版本。

您还可以传入w3counter关键字以使用w3counter 中最流行的十个分辨率。

选项

类型： object

此处设置的选项将优先于构造函数中设置的选项。

pageres.dest（目录）

设置目标目录。

目录

类型： string

pageres.run()

运行分页。返回Promise<Buffer[]>。

任务运行器

如果您使用 Grunt，请查看grunt-pageres。

对于 Gulp 和 Broccoli，直接使用 API 即可。不需要包装插件。

使用 Pageres 构建

• Break Shot – 用于捕获响应式网站屏幕截图的桌面应用程序。

有关的

• capture-website – 截取网站的不同方式