您如何使用 Puppeteer 截取数百张屏幕截图？

Question

我有一个包含数百个 html 文件的文件夹。我需要为每个人截屏，我想我可以在我的 Gulp 任务中使用 Puppeteer。

function takeScreenshots() {
    return gulp.src(path.join(paths.dest.stage, "**/*.html"))
        .pipe(tap(async (file) => {
            const browser = await puppeteer.launch({ headless: true });
            const page = await browser.newPage();
            await page.setViewport({
                width: 1024,
                height: 768,
                deviceScaleFactor: 1,
            });
            await page.goto("file://" + file.path);
            await page.screenshot({ path: path.join(path.dirname(file.path), path.basename(file.basename, ".html") + ".jpg"), quality: 10 });
            await browser.close();
        }));
}

当我运行执行此操作时，我的计算机风扇继续运转，设备锁定，我收到此消息：

(node:85389) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)

我想它试图同时做所有的截图，但我不知道如何告诉它拍一张，完成，然后转到下一张等等。

Answer 1

我进行了快速搜索，但没有找到任何同步方法pipes.so我写了一个解决方法。

1- 首先，您将使用管道将所有文件添加到 "files" 数组 & gulp-tap

2- 然后订阅 "end" 活动

3- 然后编写依赖于文件数组的业务逻辑

function takeScreenshots() {
  const files = [];
  return gulp
    .src(path.join(paths.dest.stage, "**/*.html"))
    .pipe(
      tap((file) => {
        files.push(file);
      })
    )
    .on("end", async () => {
      const browser = await puppeteer.launch({ headless: true });
      const page = await browser.newPage();
      await page.setViewport({
        width: 1024,
        height: 768,
        deviceScaleFactor: 1,
      });

      for (let i = 0, len = files.length; i < len; i++) {
        const file = files[i];
        await page.goto("file://" + file.path);
        await page.screenshot({
          path: path.join(
            path.dirname(file.path),
            path.basename(file.basename, ".html") + ".jpg"
          ),
          quality: 10,
        });
      }

      await browser.close();
    });
}

您如何使用 Puppeteer 截取数百张屏幕截图？

How can you take several hundred screenshots with Puppeteer?

javascript

node.js

gulp

screenshot

puppeteer