学习 Puppeteer 中page.screenshot 方法

在 Puppeteer 中，page.screenshot 方法用于对页面进行截图，它支持多种配置选项，以下是完整配置及各配置项的详细说明：

完整配置示例及说明

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({
        path: 'screenshot.png', // 截图保存的文件路径
        type: 'png', // 截图的文件类型
        quality: 80, // 截图的质量（仅适用于 jpeg 类型）
        fullPage: false, // 是否截取整个页面
        clip: { // 截取页面的指定区域
            x: 100,
            y: 100,
            width: 200,
            height: 200
        },
        omitBackground: false, // 是否忽略页面的背景
        encoding: 'binary', // 截图的编码格式
        captureBeyondViewport: true, // 是否捕捉视口以外的内容
        fromSurface: true, // 是否从页面的视觉表面进行截图
        preferCSSPageSize: false // 是否优先使用 CSS 中定义的页面大小
    });
    await browser.close();
})();

各配置项详细解释

1. path

• • 类型：string

• • 作用：指定截图保存的文件路径。如果不提供该参数，截图数据将以 Buffer 形式返回。

• • 示例：path: 'screenshot.png' 会将截图保存为当前目录下的 screenshot.png 文件。

2. type

• • 类型：'png' | 'jpeg' | 'webp'

• • 作用：指定截图的文件类型。支持 PNG、JPEG 和 WebP 格式。

• • 示例：type: 'jpeg' 会将截图保存为 JPEG 格式。

3. quality

• • 类型：number（范围 0 - 100）

• • 作用：设置截图的质量，仅适用于 JPEG 类型的截图。值越高，图片质量越好，但文件大小也越大。

• • 示例：quality: 80 表示截图质量为 80%。

4. fullPage

• • 类型：boolean

• • 作用：是否截取整个页面。如果设置为 true，会忽略 clip 参数，截取整个可滚动页面；如果设置为 false，则只截取当前视口。

• • 示例：fullPage: true 会截取整个页面的内容。

5. clip

• • 类型：{ x: number, y: number, width: number, height: number }

• • 作用：指定要截取的页面区域。x 和 y 表示区域左上角的坐标，width 和 height 表示区域的宽度和高度。

• • 示例：clip: { x: 100, y: 100, width: 200, height: 200 } 会截取页面上从坐标 (100, 100) 开始，宽 200 像素、高 200 像素的区域。

6. omitBackground

• • 类型：boolean

• • 作用：是否忽略页面的背景。如果设置为 true，透明背景将被设置为白色；如果设置为 false，则保留页面的原始背景。

• • 示例：omitBackground: true 会忽略页面的背景。

7. encoding

• • 类型：'base64' | 'binary'

• • 作用：指定截图的编码格式。'binary' 表示二进制数据，'base64' 表示 Base64 编码的数据。

• • 示例：encoding: 'base64' 会返回 Base64 编码的截图数据。

8. captureBeyondViewport

• • 类型：boolean

• • 作用：是否捕捉视口以外的内容。如果设置为 true，会尝试捕捉超出当前视口的部分；如果设置为 false，则只捕捉视口内的内容。

• • 示例：captureBeyondViewport: true 会捕捉视口以外的内容。

9. fromSurface

• • 类型：boolean

• • 作用：是否从页面的视觉表面进行截图。如果设置为 true，会截取页面实际显示的内容；如果设置为 false，可能会截取到一些不可见的元素。

• • 示例：fromSurface: true 会从页面的视觉表面进行截图。

10. preferCSSPageSize

• • 类型：boolean

• • 作用：是否优先使用 CSS 中定义的页面大小。如果设置为 true，会根据 CSS 中定义的页面大小进行截图；如果设置为 false，则使用视口大小。

• • 示例：preferCSSPageSize: true 会优先使用 CSS 中定义的页面大小。

通过合理配置这些选项，你可以满足不同场景下的截图需求。