Puppeteer实现选择性截图

最新推荐文章于 2024-08-09 16:21:20 发布

OkidoGreen

最新推荐文章于 2024-08-09 16:21:20 发布

阅读量4k

点赞数

分类专栏： H5网页截图

H5网页截图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如何实现截图

对百度首页进行截图

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 。

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

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 ，我们的代码可以修改为

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