在Ubuntu上使用 puppeteer 网页截图

一、安装：依赖包 + 字体

apt install nodejs npm gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget language-pack-zh-hant language-pack-zh-hans fonts-droid-fallback ttf-wqy-zenhei ttf-wqy-microhei fonts-arphic-ukai fonts-arphic-uming xfonts-wqy libjpeg-dev libpng-dev libtiff-dev libgif-dev libwebp-dev devscripts -y

如需单独安装字体（上面已包含本行内容）：

apt install language-pack-zh-hant language-pack-zh-hans fonts-droid-fallback ttf-wqy-zenhei ttf-wqy-microhei fonts-arphic-ukai fonts-arphic-uming xfonts-wqy -y

更多字体安装请参考：

https://www.crazyken.cn/blog/post/426.html

https://www.crazyken.cn/blog/post/427.html

二、安装：puppeteer ( 会自动下载同步安装 chromium )

npm i puppeteer

由于部分地区网络原因，不能下载同步安装 chromium

npm i --save puppeteer --ignore-scripts
npm config set unsafe-perm true
npm config set puppeteer_download_host=https://npm.taobao.org/mirrors
npm i puppeteer

单独安装chromium浏览器（已在上述命令中自动安装）

apt install chromium-browser -y

新建截图功能文件 index.js

const argv = process.argv

//格式化为完整网址
var reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)/;
if (!reg.test(argv[2])) {
  argv[2] = 'http://' + argv[2];
}

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    //executablePath: "/chrome-mac/Chromium.app/Contents/MacOS/Chromium",//如果是手动安装，需要指定浏览器位置
    //timeout: 30000, //设置超时时间 30 秒
    ignoreHTTPSErrors: true, //如果是访问https页面 此属性会忽略https错误
    devtools: false, // 打开开发者工具, 当此值为true时, headless总为false
    args: [
      '--no-sandbox',
      '–-disable-setuid-sandbox',
      '--disable-gpu',
      '--disable-dev-shm-usage',
      '--no-first-run',
      '--no-zygote',
      '--single-process',
      //'--proxy-server=socks5://127.0.0.1:1080', //设置代理访问
    ]
  });
  const page = await browser.newPage();
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36')
  await page.setViewport({
    width: 1280,
    height: 800,
    deviceScaleFactor: 1,
  });
  await page.setExtraHTTPHeaders({
    'Accept-Language': 'zh-CN,zh;q=0.9',
    'Referer': argv[3],
  });
  await page.goto(argv[2]); //, {waitUntil: 'domcontentloaded'} 在DOMContentLoaded事件触发时就返回结果，无需等到Load事件
  await page.screenshot({
    path: argv[3],
    type: 'png',
    // quality: 100, 只对jpg有效
    // fullPage: true,
    // 指定区域截图，clip和fullPage两者只能设置一个
    clip: {
      x: 0,
      y: 0,
      width: 1280,
      height: 791
    }
  });
  await page.close();
  await browser.close();
})();

开始截图：

node index.js url filename.png