Puppeteer: page.screenshot 调整视口大小

Question

我对Puppeteer不熟悉，如果有新手错误请谅解。

Puppeteer版本：6.0.0 / 9.0.0 / 10.0.0

我在headless:false模式下使用Puppeteer进行页面截屏。在截屏的瞬间，视口似乎会缩小（几乎缩小了一半），然后我们回到全屏状态，直到下一次截屏。

以下是相关代码：

const browser = await puppeteer.launch({
        args: ['--disable-features=site-per-process'],
        ignoreDefaultArgs: ["--hide-scrollbars"],
        headless: false
    });
...

await page.setViewport({
        width: 1000,
        height: 500,
        deviceScaleFactor: 1
    });
...

await page.screenshot({
            encoding: "base64",
            captureBeyondViewport: false
        });

我在网上发现了这个问题，他们声称已经修复了，但是如果你设置captureBeyondViewport: false，则可以解决：https://github.com/puppeteer/puppeteer/issues/7043

我已经测试了三个不同版本的 puppeteer（如上所述）。 闪烁行为无处不在。 我做错了什么吗？

- user3293924

---

嘿，我刚刚遇到了这个问题，所以找到了你的问题。你能解决这个问题吗？ - Vaviloff

很遗憾，不行。 - user3293924

如果我找到解决方案，我会发布一个答案...这里也是。 - Silas

我设置了fullPage: true和captureBeyondViewport: false，在截图之前不会闪烁或调整大小。 - Ryan Detzel

Answer 1

对于我而言，只有在page.screenshot中设置了captureBeyondViewport：false和puppeteer.launch中设置了defaultViewport：null时，调整大小才会停止。

以下是没有任何截图调整大小的完整代码：

const puppeteer = require('puppeteer');

const wait = (time) => new Promise(function (resolve) { setTimeout(resolve, time) });

(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox', '--disable-setuid-sandbox'], headless: false, defaultViewport: null});
  const page = await browser.newPage();
  await page.goto('https://en.wikipedia.org/wiki/Albert_Einstein');
  await page.screenshot({path: 'screenshot.png', captureBeyondViewport: false});
  
  await wait(2000)
  await browser.close();
})();

- William Bryk

---

defaultViewport: null 对我有效。 - MhagnumDw

Answer 2

使用puppeteer进行全屏截图时，通常会出现问题。目前的解决方案是使用第三方库来捕获全屏截图：https://github.com/morteza-fsh/puppeteer-full-page-screenshot

使用方法与使用puppeteer本身非常相似，但是它不是使用 puppeteer.screenshot 一次性捕获整个页面，而是在滚动时捕获多个图像，然后将所有捕获的图像合并成一个图像。通过这样做，就不会触发window.onresize事件。

import puppeteer from 'puppeteer';
import fullPageScreenshot from 'puppeteer-full-page-screenshot';

(async () => {
   const browser = await puppeteer.launch();
   const page = await browser.newPage();
   await page.setViewport({ width: 1920, height: 1080 });
   await page.goto('http://example.com/');

   await fullPageScreenshot(page, { path: './page.png' });

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

- Dinh Tran