使用Puppeteer截取基于WebGL的Cesium页面截图遇加载问题求助

我之前也踩过Cesium页面截图的坑，这类WebGL应用的加载逻辑和普通网页不一样——网络请求结束不代表内容渲染完成，这也是你用networkidle0/networkidle2一直卡着、直接截图又没内容的原因。

问题根源 #

Cesium加载完地形、瓦片等网络资源后，还要在客户端做大量GPU渲染工作（比如地形 tessellation、材质渲染），而networkidle系列参数只监测网络请求是否停止，完全感知不到客户端的渲染过程，所以要么提前截图抓不到WebGL内容，要么一直等网络空闲却永远等不到（可能有一些心跳请求一直存在）。

具体解决方案 #

我们需要直接监测Cesium的渲染状态，而不是依赖网络事件。这里给你两种可行的思路，结合你的代码修改：

方案1：监测Cesium Viewer的渲染帧计数

如果页面中的Cesium Viewer是全局变量（比如常见的window.viewer），可以通过检查渲染帧的数量来判断内容是否加载完成：

const puppeteer = require('puppeteer');
module.exports = {
  takeScreenshot: async (userId) => {
    let browser;
    try {
      browser = await puppeteer.launch();
      const page = await browser.newPage();

      // 导航页面时只等待DOM加载完成，跳过networkidle
      await page.goto('https://www.arelplane.com/@arelenglish', {
        waitUntil: 'domcontentloaded',
        timeout: 60000 // 给足够时间加载基础资源
      });

      // 等待Cesium场景至少渲染了几帧（确保内容已显示）
      await page.waitForFunction(() => {
        // 替换成页面实际的Viewer变量名，如果不确定可以用方案2
        return window.viewer && window.viewer.scene.renderedFrameCount > 5;
      }, { timeout: 30000 });

      // 可选：再延迟1秒让渲染更稳定
      await page.waitForTimeout(1000);

      // 执行截图
      await page.screenshot({
        path: `screenshot-${userId}.png`,
        fullPage: true // 如果需要截取整个页面
      });
    } catch (error) {
      console.error('截图失败:', error);
    } finally {
      if (browser) await browser.close();
    }
  }
};

方案2：监测Canvas的像素内容

如果不知道Cesium的全局变量名，可以直接检查页面中的WebGL Canvas是否有实际内容（避免截到空白的初始Canvas）：

// 把上面的waitForFunction替换成这段
await page.waitForFunction(() => {
  const canvas = document.querySelector('canvas');
  if (!canvas) return false;
  
  const gl = canvas.getContext('webgl') || canvas.getContext('webgl2');
  if (!gl) return false;

  // 读取Canvas中心像素，判断是否不是全黑（根据页面初始状态调整）
  const pixel = new Uint8Array(4);
  gl.readPixels(
    Math.floor(canvas.width / 2),
    Math.floor(canvas.height / 2),
    1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixel
  );
  // 只要RGB通道总和大于0，说明有内容渲染
  return pixel[0] + pixel[1] + pixel[2] > 0;
}, { timeout: 30000 });

额外注意事项 #

• 超时时间要设置足够长：Cesium加载地形、3D模型可能需要十几秒，尤其是首次加载。
• 如果页面有动态资源加载（比如按需加载瓦片），可以适当增加waitForTimeout的时间，或者监听Cesium的scene.loadProgress事件（需要在页面注入脚本监听）。
• 可以尝试设置Puppeteer的视口大小，匹配页面的Cesium容器尺寸，避免截图内容不全。

内容的提问来源于stack exchange，提问作者Arel