用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字段内容来看。比如说我的版本内容就如下图所示

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 not set viewport

官方文档上面的解释:

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();
})();

截图效果如下图所示:

after set viewport

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

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