Puppeteer – 截屏

Puppeteer中截屏是一个非常简单的任务，可使用Page.screenshot方法。

截屏整个页面

Page.screenshot方法默认截屏整个页面：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('https://www.qikegu.com');
  await page.waitForSelector('title');

  // 截屏整个视图
  await page.screenshot({ path: 'screenshot.png' });

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

截屏页面中的一个区域

Page.screenshot方法还有很多参数，如保存的图片类型、图片质量等等。

下面的例子，截屏页面中的一个指定区域：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport({ width: 1920, height: 1080 });
  await page.goto('https://www.qikegu.com');
  await page.waitForSelector('title');

  // 截屏页面中的一个区域
  await page.screenshot({
    path: 'screenshot.jpg',
    type: 'jpeg',
    quality: 80,
    clip: { x: 0, y: 0, width: 300, height: 300 }
  });

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