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

截图的代码很简单,比如如果我想实现对百度搜索框部分截图怎么做呢,查询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();

总结

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

jQuery.unique引发一个血案

项目开发过程中,PM说系统只要在一个特定的浏览器中运行就好,但是在其他的浏览器中不能出现逻辑的错误,所以在开发过程中,前端和后台选择是Chrome浏览器,没有仔...

22080
来自专栏python全栈布道师

使用python读取和写入Excel

43560
来自专栏前端架构

再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

ng-bind 单向数据绑定($scope -> view),用于数据显示,简写形式是 {{}}。

20230
来自专栏优启梦

Chrome控制台console的基本用法

大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端设计调试都有它比其它浏...

465120
来自专栏九彩拼盘的叨叨叨

写出好的前端代码不是件容易事

什么样的代码算是好代码? 在我看来,易于维护的代码就是好代码。当然代码还可以从性能,安全等方面来考量。这些不在本文的讨论范围之内。

8530
来自专栏IT探索

excel

2. 在excel2007中打开mysql导出utf-8编码的csv文件,避免乱码:

13010
来自专栏前端新视界

关于 devbridge-autocomplete 插件多选操作的实现方法

目前据我所知最好用的 autocomplete 插件就是 jquery-ui 的 autocomplete 以及 devbridge 的 autocomplet...

21380
来自专栏草根专栏

Python数据分析(一): ipython 技巧!

不一定非得使用Jupyter Notebook,试试ipython命令行 安装 ipython 我只试过Windows 10环境下的。 1.安装python安装...

36360
来自专栏程序员的知识天地

1000多个项目中的十大JavaScript错误以及如何避免

通过统计数据库中的1000多个项目,我们发现在 JavaScript 中最常出现的错误有10个。下面会向大家介绍这些错误发生的原因以及如何防止。

13730
来自专栏一个会写诗的程序员的博客

正则表达式 删除 Java 代码中的注释

想如何删掉所有java 或xml 中的注释,还在寻找eclipse 中的快捷键了吗,你out了,现在都用正则表达式了、

22740

扫码关注云+社区

领取腾讯云代金券