使用Puppeteer截图时页面闪烁

Question

我在Ubuntu上使用node和express使用puppeteer。

我有一个端点，当在浏览器上调用时，可以从puppeteer返回屏幕截图。

奇怪的是，每次这样做时，Chrome上的页面会闪烁（我没有运行无头模式，因为我想看到发生了什么）。

以下是视频演示：

https://youtu.be/FlgROI85y2E

这导致一些奇怪的问题，在某些网站上，当你点击外部区域关闭菜单或弹出窗口时，在截图时，该弹出窗口或菜单会消失。

这里是另一个例子，使用Google关于页面来说明：

https://youtu.be/tXqyCO8oAHg

这是我目前获取屏幕截图的端点的样子：

app.get("/ss/:id/*", async (req, res) => {
  const { id } = req.params;
  const page = await getPage(id);

  const { resolution } = req.cookies;

  let [width, height] = (resolution as string)
    .split("x")
    .map((o) => parseFloat(o));

  width = Math.max(width, 1) - 4; // for netscape;
  height = Math.max(height, 1) - 4; // for nestcape;

  const ss = await page.screenshot({
    quality: 100,
    encoding: "binary",
    type: "jpeg",
    clip: { x: 0, y: 0, width, height },
  });

  res.type("jpg");
  res.send(ss);
});

我尝试使用PNG而不是JPEG，也尝试过不使用Clip。设置视口和不设置视口都试过。

我不明白为什么会出现这种情况。

有人以前见过这种行为并知道如何解决吗？

谢谢！

- Eric.M

Answer 1

今天遇到了同样的问题，看起来还有其他人和我一样遇到了麻烦。

最后我找到了关于这个问题的issues，或许可以帮助其他人。

const pic = await page.screenshot({
    ...ur options,
    captureBeyondViewport: false // fix problem
  });

- donggua