pageres中文文档|pageres js中文教程|解析

npm npmdoc 2年前 (2021-12-31) 637次浏览

pageres中文文档|pageres js中文教程|解析

安装命令:npm i pageres

分页

覆盖状态
XO代码风格

以各种分辨率捕获网站的屏幕截图。确保您的网站具有响应性的好方法。它速度很快,只需一分钟多一点就可以从 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

如果没有设置背景transparentwhite则将背景颜色设置为而不是

暗模式

类型: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 – 用于捕获响应式网站屏幕截图的桌面应用程序。

有关的

项目贡献人员列表:


极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:pageres中文文档|pageres js中文教程|解析
喜欢 (0)
.excerpt .focus {display:none}