命令行批量截图Node脚本示例代码

来分享一下命令行批量截图Node脚本的完整攻略。

简介

有时候我们需要在网站上批量截取图片，例如某个网站上有大量图标，需要逐个下载，这时候手动截图就会变得非常繁琐。如果使用Node.js编写一个命令行脚本，就可以轻松实现批量截屏。

安装及使用

1. 安装Node.js

下载并安装合适版本的 Node.js。

1. 安装ChromeHeadless

ChromeHeadless是 Chrome 浏览器的无界面版本，可以通过脚本调用 ChromeHeadless 来进行页面截图

安装 ChromeHeadless：

Ubuntu 和 Debian:

sudo apt-get install -y libnss3-tools chromium-browser

macOS:

brew install chromium

或直接从谷歌官方下载：https://www.google.com/chrome/

1. 安装Puppeteer

Puppeteer是一个由 Google Chrome 官方团队维护的用于控制 ChromeHeadless 的库。

安装Puppeteer（切换至淘宝镜像进行安装会更快）：

npm i puppeteer -S --registry=https://registry.npm.taobao.org

1. 编写代码

代码示例：

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.baidu.com');
  await page.setViewport({width: 1000, height: 800});

  const links = [
    {url: 'https://www.baidu.com', name: 'baidu_home'},
    {url: 'https://www.google.com', name: 'google_home'}
  ];

  for (let i = 0; i < links.length; i++) {
    await page.goto(links[i].url, {waitUntil: 'networkidle2'});
    await page.screenshot({path: `./${links[i].name}.png`});
  }

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

上述代码经过简单封装，可以方便的实现从一组网址列表中批量截屏，图片会被保存在当前目录下。

示例说明

1. 获取多个网站的截图

目标：获取多个网站主页截图

示例代码：

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({width: 1000, height: 800});

  const links = [
    {url: 'https://www.baidu.com', name: 'baidu_home'},
    {url: 'https://www.google.com', name: 'google_home'},
    {url: 'https://github.com', name: 'github_home'}
  ];

  for (let i = 0; i < links.length; i++) {
    await page.goto(links[i].url, {waitUntil: 'networkidle2'});
    await page.screenshot({path: `./${links[i].name}.png`});
  }

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

1. 获取同一个网站多个页面的截图

目标：获取百度首页、知道、图片、文库、视频五个页面的截图

示例代码：

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({width: 1000, height: 800});

  const links = [
    {url: 'https://www.baidu.com', name: 'baidu_home'},
    {url: 'https://zhidao.baidu.com', name: 'baidu_zhidao'},
    {url: 'https://image.baidu.com', name: 'baidu_image'},
    {url: 'https://wenku.baidu.com', name: 'baidu_wenku'},
    {url: 'https://v.baidu.com', name: 'baidu_video'}
  ];

  for (let i = 0; i < links.length; i++) {
    await page.goto(links[i].url, {waitUntil: 'networkidle2'});
    await page.screenshot({path: `./${links[i].name}.png`});
  }

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

总结

通过Node.js编写的命令行脚本，可以轻松实现批量截屏的需求，Puppeteer提供了丰富的API供我们调用。利用一些简单的控制流语句，我们可以方便的实现从一组网址列表中批量截屏的需求。