代码之家 › 专栏 › 技术社区 › Arel

使用Puppeter拍摄运行WebGL的页面截图

cesium puppeteer webgl

3

Arel · 技术社区 · 7 年前

我正在尝试截图一个运行基于webGL的铯的页面。如果我只是截图,页面将被加载,但webGL不会完成加载。

如果我使用内置 networkidle0 或 networkidle2 ,屏幕截图从未被拍摄。这是我的密码。

这是我正在尝试拍摄的网站: https://www.arelplane.com/@arelenglish

const puppeteer = require('puppeteer');

module.exports = {
  takeScreenshot: (userId) => {
    (async () => {
      const browser = await puppeteer.launch({
        headless: false,
        args: [
          '--headless',
          '--hide-scrollbars'
        ]
      });
      const page = await browser.newPage();
      await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0"});
      await page.screenshot({path: 'example.png'});

      await browser.close();
    })();
    return "Successful API call!";
  }
}

1 回复 | 直到 7 年前

1

5

Md. Abu Taher 7 年前

你的密码是 headless: false ,以及一个名为 --headless 也就是说 headless: true .木偶演员会感到困惑。

撇开玩笑不谈,以下是我在“网络”选项卡上看到的内容。

“网络”选项卡表示它至少加载66个请求,其中至少包含或超过 1.5s 对于每个资源(idk为什么在我的默认chrome上加载较慢)。

来自a的相同 page load test (click to see the report) ,基本上说它在40多秒钟内加载170多个请求。

默认超时为30秒,但加载数据的时间超过90秒。

下面是处理导航超时的参数。

await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0", "timeout": 0}); // timeout: 0 will disable navigation timeout

禁用超时或将其增加到120秒或该范围内的其他值。这是我的密码,

puppeteer.launch({headless: false}).then(async browser => {
  const page = await browser.newPage();
  await page.goto('https://www.arelplane.com/@arelenglish', {"waitUntil" : "networkidle0", "timeout": 0});
  await page.screenshot({path: "test.png"});
  await browser.close();
});

结果如下:,