用 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)
}

截图的内容

可以针对页面或者某一个页面元素截图，分别使用 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 参数为 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'
  }) 
}

如果您对本文有疑问或者寻求合作，欢迎 联系邮箱 。邮箱已到剪贴板

精彩评论