Puppeteer + Nodejs 通用全屏网页截图方案(二)常用参数实现

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

# Puppeteer + Nodejs 通用全屏网页截图方案(一)基本功能

页面等待

有时我们可能希望让页面等待一段时间再执行截图，当使用await page.waitFor(1000)来让页面等待时会提示该方法将被弃用：

waitFor is deprecated and will be removed in a future release. See https://github.com/puppeteer/puppeteer/issues/6214 for details and how to migrate your code.

所以我们自己简单实现一个

// Puppeteer基于node环境，对js新语法支持度非常好，可以用promise实现
    function sleep(timeout = 10) {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
        }, timeout)
      })
    }

使用调用： await sleep(1000)

模拟设备

当目标页面是移动端网页时，有时可能需要对浏览器ua进行模拟才能访问真实的页面（有些H5网页可能是通过判断ua来进入不同项目，而不是自适应或响应式）

模拟UA方法：

// const ua = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'
ua && page.setUserAgent(ua)

还有一种方法是模拟设备，该模式下会自动设置ua以及屏幕宽高等参数，可以创建自定义的设备，但是没必要，Puppeteer已经为我们做了很多预设，代码如下：

    // ua && page.setUserAgent(ua)
    // const devices = 'iPhone 6'
    if (devices) {
      devices = puppeteer.devices[devices]
      devices && (await page.emulate(devices))
    }

预设列表我也整理出来了：

const DevicesNames = [
    'Blackberry PlayBook',
    'Blackberry PlayBook landscape',
    'BlackBerry Z30',
    'BlackBerry Z30 landscape',
    'Galaxy Note 3',
    'Galaxy Note 3 landscape',
    'Galaxy Note II',
    'Galaxy Note II landscape',
    'Galaxy S III',
    'Galaxy S III landscape',
    'Galaxy S5',
    'Galaxy S5 landscape',
    'iPad',
    'iPad landscape',
    'iPad Mini',
    'iPad Mini landscape',
    'iPad Pro',
    'iPad Pro landscape',
    'iPhone 4',
    'iPhone 4 landscape',
    'iPhone 5',
    'iPhone 5 landscape',
    'iPhone 6',
    'iPhone 6 landscape',
    'iPhone 6 Plus',
    'iPhone 6 Plus landscape',
    'iPhone 7',
    'iPhone 7 landscape',
    'iPhone 7 Plus',
    'iPhone 7 Plus landscape',
    'iPhone 8',
    'iPhone 8 landscape',
    'iPhone 8 Plus',
    'iPhone 8 Plus landscape',
    'iPhone SE',
    'iPhone SE landscape',
    'iPhone X',
    'iPhone X landscape',
    'Kindle Fire HDX',
    'Kindle Fire HDX landscape',
    'LG Optimus L70',
    'LG Optimus L70 landscape',
    'Microsoft Lumia 550',
    'Microsoft Lumia 950',
    'Microsoft Lumia 950 landscape',
    'Nexus 10',
    'Nexus 10 landscape',
    'Nexus 4',
    'Nexus 4 landscape',
    'Nexus 5',
    'Nexus 5 landscape',
    'Nexus 5X',
    'Nexus 5X landscape',
    'Nexus 6',
    'Nexus 6 landscape',
    'Nexus 6P',
    'Nexus 6P landscape',
    'Nexus 7',
    'Nexus 7 landscape',
    'Nokia Lumia 520',
    'Nokia Lumia 520 landscape',
    'Nokia N9',
    'Nokia N9 landscape',
    'Pixel 2',
    'Pixel 2 landscape',
    'Pixel 2 XL',
    'Pixel 2 XL landscape'
  ]

设置像素比

针对移动端的页面，截图效果可能会比较模糊，我们可以通过提高像素比来增加分辨率，获得更好的图片效果(类似设备DPR)，不过参数越高生成速度与性能消耗也会越大，建议加个阈值。

// 设置浏览器视窗
    page.setViewport({
      width: Number(width),
      height: Number(height),
      deviceScaleFactor: !isNaN(scale) ? (+scale > 4 ? 4 : +scale) : 1, // 默认为1，阈值为4
    })

对页面某个元素截图

实际项目中没有使用到的需求场景，简单做下记录

let [element] = await page.$x('/html/body/section[4]/div/div[2]')
await element.screenshot({ path: 'xxx.png' })

下一篇文章中将会介绍一些进阶的方法。