如何用nodejs去做网页截图

Posted 2023-05-18

很多情况下，我们都需要在电脑上做一些截图的操作。有哪些常用的截图方法呢？
1、按键盘上的print screen 键：这个方法很麻烦，估计很少人用吧！
如果有如下需求：
1、截取一个网页，也就是一个滚动窗口的所有内容；
2、需要重复截取屏幕上的某一个固定区域，比如一个窗口截图一次后，做了一些修改，要重复截取一次，标识改变的地方；
3、在截图上画矩形框、气泡框、箭头，加汉字等
这样的需求，QQ截图虽然可以实现，但是那就太麻烦了，所以今天给大家推荐一款快捷好用的截图软件，叫做PicPick
软件安装包不大，开启后占用约25MB内存，所以即使设定为开机启动，也不会造成太大的性能影响。同时，这款软件原生支持全中文，并且对于个人及家庭用户是免费的，也不用考虑是否需要汉化或者破解之类的问题。
工具/原料
PicPick
windows
软件主界面介绍
1首先需要下载此软件，截止2013-11-06，最新的版本应该是3.2.8。安装过程中，会要求安装另一个系统优化的软件，大家直接拒绝就可以了
2安装完毕后，此软件界面如图，主要的功能也都体现在主界面上了。
右边的实用工具就不多介绍了，一看就明白，支持“屏幕取色”、“调色”、“放大镜”、“标尺”、“坐标轴”、“量角器”和“白板”功能。绝对是设计师和PPTer的好帮手。
主界面左下方的截图工具才是重点，介绍如下：
1、全屏：当前整个屏幕
2、窗口控件：使用这个截图功能的时候，会出现一个红框，单击鼠标，红框范围内的窗口就会被截取了
3、滚动窗口：比如一个很长的网页，支持一次性截取为图片。虽然很多浏览器都支持，但是这个软件还支持比如IE之类的浏览器，很实用。
4、矩形区域：最常用的，截取一个矩形框中的内容
5、固定区域：截取某一个固定区域
6、任意形状：比如截图一个圆形啊、心形啊之类的都可以
7、重复上次截取：这才是真正的最实用的功能，可以把上一次截取的区域再截取一次，超级好用
截图步骤
1PicPick软件截图，有如下的方法：
1、主界面截图：就是在如下界面上，选择相应的功能
2、在工具栏托盘中，单击PicPick的图标，选择“截取屏幕”
3、使用快捷键，具体的键位设定请参见软件的设置界面，图片中是我最常用的功能和自定义的快捷键
4、在编辑图片的窗口，左上角的文件菜单中，选择截取屏幕
图片修改
1截图之后会自动打开图片编辑的窗口，如图，最常用的文字、矩形框等工具都在界面最上方，使用方法也很简单，单击相应的图形即可
其他设置
1建议勾选该软件的如下设置，会让软件更好用
2建议让软件开机自动启动即可，因为不占太多内存，功能也足够强大 参考技术A 搜索一下phantomjs试试。

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

# 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

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