Puppeteer实现选择性截图

发表于

如何实现截图

对百度首页进行截图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const puppeteer = require('puppeteer');

const start = async () => {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();

    await page.goto('https://www.baidu.com');

    await  page.screenshot({
        path:'baidu.png'
    });
    await page.close();
    await browser.close();
}

start();

截图的代码很简单，比如如果我想实现对百度搜索框部分截图怎么做呢，查询page.screenshot api 可以看到其api说明中包含clip 选项，用于设置截图的x,y,width,hegiht.通过查看元素可以看到搜索框部分的form id 为 form 。

基于上面的代码做如下修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const puppeteer = require('puppeteer');

const start = async () => {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();

    await page.goto('https://www.baidu.com');

    //调用evaluate 方法返回id 为form元素的位置信息
    let clip = await page.evaluate(() => {
        let {
            x,
            y,
            width,
            height
        } = document.getElementById('form').getBoundingClientRect();
        return {
            x,
            y,
            width,
            height
        };
    });

    await  page.screenshot({
        path:'baidu.png',
        clip:clip //设置clip 属性
    });
    await page.close();
    await browser.close();
}

start();

修改后即可完成对百度搜索框的局部截图

但上面的实现有些复杂，我们需要获取位置信息，有没有一种方式针对元素进行截图呢，puppeteer提供了另一个接口ElementHandle.screenshot 方法，该方法参数和page.screenshot 一样。ElementHandle 对象是页面内的Dom对象。

如果使用ElementHandle.screenshot ，我们的代码可以修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
const puppeteer = require('puppeteer');

const start = async () => {

    const browser = await puppeteer.launch();

    const page = await browser.newPage();

    await page.goto('https://www.baidu.com');

    //调用evaluate 方法返回id 为form元素的位置信息
    // let clip = await page.evaluate(() => {
    //     let {
    //         x,
    //         y,
    //         width,
    //         height
    //     } = document.getElementById('form').getBoundingClientRect();
    //     return {
    //         x,
    //         y,
    //         width,
    //         height
    //     };
    // });

    // await  page.screenshot({
    //     path:'baidu.png',
    //     clip:clip //设置clip 属性
    // });
    //获取页面Dom对象form
    let form = await page.$('#form');
    //调用页面内Dom对象的screenshot 方法进行截图
    form.screenshot({
        path:'form.png'
    });
    await page.close();
    await browser.close();
}

start();

总结

两种方法可以作如下类比学习：

page.screenshot 如果类比为document.getElementById

ElementHandle.screenshot 就类似domElement.getElementById

PS

今天puppeteer 发布了1.4.0版本主要更新如下：

大的升级：Chromium 68.0.3419.0 (r555668)

API 增加：1、elementHandle.$eval 类似domElement.querySelector(‘selector’) 2、page.browser() 3、target.browser

其它：bug fix 和优化

https://github.com/GoogleChrome/puppeteer/releases