Web截图方案-puppeteer的使用

NodeJs
,

Web截图方案有哪些？

1、html2canvas

这是一个使用人数比较多的库，用于将DOM转换为canvas，从而利用canvas的API生成图片。优点是：纯前端实现，无需后端支持；缺点是：复杂页面或DOM的转换效果不理想，另外对应用到DOM的样式有一些限制。详情参见：https://github.com/niklasvh/html2canvas/

2、dom-to-image

该库的原理是利用svg的foreignObject标签来包裹html内容，从而生成一个data url。详情参见：https://github.com/tsayen/dom-to-image

3、PhantomJS

PhantomJS是一个无界面的可执行JavaScript脚本的网页浏览器。它可以运行在Windows、MacOS、Linux和FreeBSD系统上。该库目前已不再维护，详情参见：https://phantomjs.org/

4、SlimerJS

SlimerJS类似与PhatomJS，只是内核基于火狐的浏览器引擎Gecko，而不是Webkit。
详情参见：https://slimerjs.org/

5、Puppeteer

Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包，用来模拟 Chrome 浏览器的运行。详情参见：https://github.com/puppeteer/puppeteer/

前两种是前端实现方案，后三种是后端实现方案。综合各方案优缺点，这里推荐使用Puppeteer，以下简单介绍其用法。

puppeteer的使用

安装

1
npm install puppeteer

如果出现如下错误：

ERROR: Failed to download Chromium r686378! Set “PUPPETEER_SKIP_CHROMIUM_DOWNLOAD” env variable to skip download.

这是由于安装puppeteer时，会自动下载其依赖的Chromium版本，下载失败时就会报错，可以根据提示设置环境变量跳过下载：

1
npm config set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD 1

手动下载Chromium

1、打开/node_modules/puppeteer/package.json查看安装的puppeteer依赖的Chromium版本：

1
2
3
"puppeteer": {
  "chromium_revision": "686378"
}

2、访问https://npm.taobao.org/mirrors/chromium-browser-snapshots/，下载符合当前操作系统类型版本。

3、将下载后的zip包解压后放到/node_modules/puppeteer/.local-chromium/{操作系统平台-Chromium版本}/目录下，如果目录.local-chromium和{操作系统平台-Chromium版本}不存在则手动创建。

例如操作系统为Windows 64位，则{操作系统平台-Chromium版本}目录名为：win64-686378。

截图

以打开百度首页进行截图为例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const puppeteer = require('puppeteer');

(async () => {
  // 创建一个浏览器实例
  const browser = await puppeteer.launch({
    headless: true
  });

  // 创建一个新的页面实例
  const page = await browser.newPage();
  // 设置页面视口宽高
  await page.setViewport({
    width: 1920,
    height: 1280
  });
  // 加载url
  await page.goto('https://baidu.com');
  // 截图保存到本地
  await page.screenshot({
    path: 'D:/baidu.png'
  });
})();

Puppeteer的更多api可参见其文档：https://github.com/puppeteer/puppeteer/blob/v9.1.1/docs/api.md。

参考文档：