Puppeteer实现选择性截图

深藏阁楼爱情的钟 2021-06-24 16:12 789阅读 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();

# 总结 #

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

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][https_github.com_GoogleChrome_puppeteer_releases]

[https_github.com_GoogleChrome_puppeteer_releases]: https://github.com/GoogleChrome/puppeteer/releases

发表评论取消回复

表情：

评论列表（有 0 条评论，789人围观）

还没有评论，来说两句吧...

相关阅读

相关 java实现屏幕截图

话不多说直接上代码 / 屏幕截图 @param imageName 存储图片名称比如： screen

一时失言乱红尘/ 2023年10月11日 16:21/ 0 赞/ 79 阅读

相关 Excel截图，折线图截图，柱状图截图，饼图截图

package test; import java.io.ByteArrayOutputStream; import java.io.File

Myth丶恋晨/ 2023年10月06日 16:11/ 0 赞/ 97 阅读

相关截图代码-窗口截图

bool Tool::capturePicture(QString strWndName, QString strFilepath) { HW

我不是女神ヾ/ 2022年09月15日 11:48/ 0 赞/ 379 阅读

相关 python实现截图功能

python实现截图功能。 windows环境下。需要用到PIL库。安装PIL。这里使用pip方式安装。首先安装pip，安装pip方法：http://blog.csd

迈不过友情╰/ 2022年06月01日 03:19/ 0 赞/ 346 阅读

相关实现网站长截图

一、简单手动截图（手动截图，推荐使用，本人亲测成功） 1.开发者程序 Chrome 开发者工具中其实自带了截图命令，按下 ⌘Command + ⌥Option + I

深藏阁楼爱情的钟/ 2022年03月08日 07:58/ 0 赞/ 381 阅读

相关 puppeteer 教程（4） ----入门例子（访问百度，并截图）

目标经过前几篇啰里啰嗦的介绍与环境的搭建，下面我们正式开始入手一个例子开始我们的爬虫之旅主要学习以下知识点 <table> <thead> <tr>

我会带着你远行/ 2021年11月01日 12:28/ 0 赞/ 455 阅读

相关 Python实现屏幕截图

好处是灵活速度快缺点是：写法繁琐不跨平台 import time import win32gui, win32ui, win32con, wi

红太狼/ 2021年10月19日 00:54/ 0 赞/ 460 阅读

相关使用puppeteer之全网页截图-修订版

[https://blog.csdn.net/ASAS1314/article/details/84847770][https_blog.csdn.net_ASAS1314_a

超、凢脫俗/ 2021年09月20日 03:02/ 0 赞/ 564 阅读

相关 Puppeteer实现选择性截图

如何实现截图对百度首页进行截图 const puppeteer = require('puppeteer'); const start =

深藏阁楼爱情的钟/ 2021年06月24日 16:12/ 0 赞/ 790 阅读

相关 puppeteer实现html截图的示例代码

puppeteer是谷歌官方出品的一个通过 [DevTools ][DevTools]协议控制 headless Chrome 的Node库。可以通过Puppeteer的提供的

阳光穿透心脏的1/2处/ 2021年06月11日 15:14/ 0 赞/ 564 阅读