Chrome无头模式下SVG转图片问题：页面未完成渲染即退出

这问题我之前做SVG转图工具时也踩过坑！旧版无头Chrome的默认行为确实反直觉——它会在document.onload触发后立刻退出，但这时候你通过XHR异步拉取的SVG数据大概率还没加载、渲染完成，自然转图就失败了。给你几个实用的解决方案：

1. 升级到新版无头模式（最推荐） #

Chrome 96之后推出了新版无头模式，行为和正常交互模式几乎一致，不会在document.onload后自动退出，会一直保持浏览器运行状态，直到你主动关闭。启动命令改成这样：

chromium --headless=new http://myserver.org

如果你的转图逻辑是页面内JS完成的，新版无头模式会等到所有异步操作（包括XHR请求、SVG渲染）完成后，再执行后续的截图/导出逻辑，完美解决提前退出的问题。

2. 给旧版无头模式添加等待逻辑（兼容老版本） #

如果只能用旧版无头模式（--headless=old或者直接--headless），可以通过注入自定义JS脚本，让Chrome等待你的SVG数据加载完成后再退出。比如：

方案A：等待自定义标记 #

在你的页面JS里，当SVG数据加载并渲染完成后，给页面添加一个标记元素：

// 当SVG加载渲染完成后执行
document.body.classList.add('svg-ready');

然后启动Chrome时，用--execute-script注入等待脚本：

chromium --headless --execute-script="
  new Promise(resolve => {
    const checkReady = () => {
      if (document.body.classList.contains('svg-ready')) {
        resolve();
      } else {
        setTimeout(checkReady, 100);
      }
    };
    checkReady();
  }).then(() => window.close());
" http://myserver.org

这个脚本会轮询页面是否有svg-ready类，直到满足条件才关闭浏览器，确保SVG已经渲染完成。

方案B：等待所有XHR请求完成 #

如果你的SVG是通过XHR拉取的，可以监听所有XHR的状态，等待全部完成后再退出：

chromium --headless --execute-script="
  const xhrs = [];
  const originalOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    xhrs.push(this);
    originalOpen.apply(this, arguments);
  };
  new Promise(resolve => {
    const checkAllDone = () => {
      const allDone = xhrs.every(xhr => xhr.readyState === 4);
      if (allDone) {
        resolve();
      } else {
        setTimeout(checkAllDone, 100);
      }
    };
    checkAllDone();
  }).then(() => window.close());
" http://myserver.org

这个脚本会拦截所有XHR请求，等待它们全部完成后再关闭浏览器。

3. 使用Puppeteer精确控制（适合自动化场景） #

如果你的转图逻辑是用Node.js自动化的，强烈建议用Puppeteer（Chrome官方的Node.js库），它能完全控制无头Chrome的行为，比如：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto('http://myserver.org');
  
  // 等待SVG渲染完成的标记，比如某个SVG元素出现
  await page.waitForSelector('#target-svg');
  
  // 截图为PNG
  await page.screenshot({ path: 'output.png', type: 'png' });
  // 或者截图为JPEG
  await page.screenshot({ path: 'output.jpg', type: 'jpeg', quality: 90 });
  
  await browser.close();
})();

Puppeteer会精确等待你指定的条件（元素出现、自定义Promise完成），完全不用担心提前退出的问题，而且API更友好，适合批量转图的场景。

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