用 Puppeteer 截图

发表时间 ·

按照 《Puppteer 配置浏览器属性》一文配置浏览器后,启动浏览器并打开网页,第一件可以自动完成的事情就是截图。 本文详细讨论截图的一些细节操作。

基本代码框架

本文介绍的函数,将基于下面的代码。这段代码实现了一个启动浏览器、并打开指定的网页的过程:

async function () {

  const url = 'https://www.baidu.com'
  const width = 1600
  const height = 900
  let browser = await puppeteer.launch({
			headless: false, 
			ignoreHTTPSErrors: true,
			slowMo: 100,
			args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            `--window-size=${width},${height}`
        ]
  })

  let page = await browser.newPage()
  await page.goto(url)
}

截图的内容

screenshot

可以针对页面或者某一个页面元素截图,分别使用 page.screenshot() 函数 和 elementHandle.screenshot()函数
下面首先介绍针对页面的截图。

页面截图

可以保存为 jpeg、png、pdf 三种格式。前两种图片格式,可以直接体现在保存的文件名里:

await page.screenshot({path: 'homepage.png'}) 
await page.screenshot({path: 'homepage.jpeg'}) 

因为 pdf 文件格式的可配置项很多,为了得到 pdf 格式,需要调用 另一个 pdf 函数

await page.pdf({path: 'homepage.pdf'}) 

这三种截图文件格式,如果不指定 path 参数,将不会写入文件。

如果截得的是 jpeg 格式,还能指定文件的压缩质量,从0~100不等,100是最高质量。

await page.screenshot({
         path: 'homepage.jpeg',
         quality: 99
}) 

页面滚动截图

fullPage

默认截图得到的是视口内的页面,如果希望实现一边拖动滚动条,一边截图,一直得到完整的页面截图,需要令 fullPage 参数为 true

await page.screenshot({
         path: 'homepage.png',
         fullPage: true
}) 

页面元素截图

还可以针对某个特定元素截图,可以用来特别关注某个关键的页面元素的外观。具体方法是首先获得 该元素的引用,再调用 screenshot 函数

let logo = await page.waitForSelector('#lg')

await logo.screenshot({
         path: 'homepage.png'
}) 

一个可用的版本

async function () {

  const url = 'https://www.baidu.com'
  const width = 1600
  const height = 900
  let browser = await puppeteer.launch({
			headless: false, 
			ignoreHTTPSErrors: true,
			slowMo: 100,
			args: [
            '--no-sandbox',
            '--disable-setuid-sandbox',
            `--window-size=${width},${height}`
        ]
  })

  let page = await browser.newPage()
  await page.goto(url)
  let logo = await page.waitForSelector('#lg')

  await logo.screenshot({
         path: 'homepage.png'
  }) 
}

相关文章   欢迎到 留言板 写下你的看法。
  本页面内容采用 署名协议 CC-BY 授权。欢迎转载,请保留原文链接