用puppeteer来截屏

安装

执行命令npm install --save puppeteer进行安装

结果报错ERROR: Failed to download Chromium r571375! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

在网上找了一下原因，是因为我不能直接访问google，所以下载chromium的时候出错了，可以参照这个issue里面提到的方法解决该问题。

我参照了上面那个链接里面提到的方法，主要解决步骤如下：

• 执行env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD="true" npm i --save puppeteer命令，先跳过chromium的下载

• 我根据这个issue里面提到的解决办法，从这个淘宝源里面手动下载了chrome-linux.zip文件。

• 然后，手动在node_modules/puppeteer/里面创建文件夹以及路径.local-chromium/linux-571375。至于linux-571375后面跟的这串数字，得根据你安装的puppeteer的package.json（路径在yourproject/node_modules/puppeteer/package.json）里面的chromium_revision字段内容来看。比如说我的版本内容就如下图所示

• 再将刚刚下载的chrome-linux.zip放到yourproject/node_modules/puppeteer/.local-chromium/linux-571375路径下面。

• 然后执行unzip chrome-linux.zip命令，进行解压。

截图代码

在youproject里面新建index.js文件，然后在该文件里面，写上如下代码。

比如说截取qq音乐的图片

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://y.qq.com');
  await page.screenshot({path: 'yqq.png'});

  await browser.close();
})();

截图效果如下图：

看官方文档上面的解释：

Puppeteer sets an initial page size to 800px x 600px, which defines the screenshot size. The page size can be customized with Page.setViewport().

原来是puppeteer默认是800 * 600，我要截取更大的范围的话，可以加上这条代码await page.setViewport({width: 1920, height: 1080});，整体代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://y.qq.com');
  await page.setViewport({width: 1920, height: 1080});
  await page.screenshot({path: 'yqq.png'});

  await browser.close();
})();

截图效果如下图所示：

因为我之前是给我的机器装了中文字体的，所以截图里面没有出现方框乱码。如果你没有安装中文字体的话，会出现方框乱码，可以参照我的之前一篇安装中文字体的笔记来安装中文字体。

更多关于puppeteer的用法，可以看github官方文档