puppeteer 截图，高德地图显示不全问题

[Zijue]

环境

• puppeteer: 13.5.1
• chromium: 970485

问题描述

在本地linux虚拟机中使用puppeteer截图网页DOM时，高德地图部分未渲染（区域显示为空）；但在宿主机windows上运行同样的代码进行截图，高德地图部分全部加载

• 在linux虚拟机中截图

• 在windows宿主机截图

排查过程

• 起初认为是linux为无GUI的，无法像桌面端那样调用GPU资源从而无法使用webgl。遂进行如下测试：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    // headless: false,
  });
  const page = await browser.newPage();

  // Test for webgl support
  // e.g. https://developer.mozilla.org/en-US/docs/Learn/WebGL/By_example/Detect_WebGL
  const webgl = await page.evaluate(() => {
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl');
    const expGl = canvas.getContext('experimental-webgl');

    return {
      gl: gl && gl instanceof WebGLRenderingContext,
      expGl: expGl && expGl instanceof WebGLRenderingContext,
    };
  });

  console.log('WebGL Support:', webgl);

  await browser.close();
})();

• 输出结果，桌面端windows与虚拟机linux结果输出一致

WebGL Support: { gl: true, expGl: true }

• 查看虚拟机linux的gpu支持情况

./node_modules/puppeteer/.local-chromium/linux-970485/chrome-linux/chrome --headless --no-sandbox --print-to-pdf chrome://gpu

• 通过尝试，发现地图是可以正常导出的，例如：

• 同时，测试高德部分地图也是可行的
  https://lbs.amap.com/demo/jsapi-v2/example/district-search/draw-district-boundaries

• 到此，感觉是高德做了某些限制，直接找高德寻求技术支持，提供相关问题后，得到如下答复

您好，JSAPI 2.0 版本依赖 WebGL环境，需要同时满足以下条件：
1、浏览器支持WebGL；
2、Chrome 在有些环境下硬件加速是关闭的，需要开启硬件加速；
3、Chrome 有一个内置的显卡黑名单，黑名单内的显卡无法获取到webgl上下文，此时会Chrome启动CPU模拟显卡（google swiftshader），页面会非常卡顿，可以尝试在 chrome://flags/#ignore-gpu-blocklist 打开 "Override software rendering list" 特性；
4、JSAPI 默认启用了 **failIfMajorPerformanceCaveat** 参数来获取 webgl 上下文，图形绘制性能比较差的环境下不开启WebGL绘制，如需要可以在 地图 JSAPI 脚本引用之前设置全局变量 window.forceWebGL = true。
辛苦您排查下。2.0全局变量也可以使用增强版：window['forceWebGLBaseRender'] = true

• 立刻意识到，可能是第四点导致。添加全局变量后，虚拟机linux导出也正常了

感谢

• Can not render a WebGL image for PDF -- get a black box instead
• GPU is always disabled when running in headless mode.