Puppeteer实现选择性截图
原创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 和优化
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。