使用 puppeteer 截图时页面闪烁

Question

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

我基本上有一个端点，当我在浏览器上调用它时，我会返回来自 puppeteer 的屏幕截图。

但奇怪的是，每次我这样做时，chrome 上的页面都会闪烁（我不是无头运行，因为我想看看发生了什么）。

这是发生的事情的视频：

https://youtu.be/FlgROI85y2E

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

这是谷歌关于页面的另一个例子，说明了这一点：

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，我也尝试过不使用剪辑。设置和不设置视口。

我不明白为什么会发生这种情况。

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

谢谢！

Answer 1

今天也遇到同样的问题，看来还有人和我遇到同样的问题

最后我发现了这方面的问题，也许可以帮助其他人

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