Puppeteer实现选择性截图

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();

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();

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();