Puppeteer全页截图丢失背景图片问题求助

你的问题出在现有代码只等待了<img>标签的图片加载，而CSS定义的背景图片（background-image）不在监听范围内，所以截图时背景图还没加载完成，导致缺失。

修复方案 #

修改等待逻辑，同时处理<img>元素和所有元素的背景图片加载，具体调整如下：

修改后的代码 #

async function screeshotFullPage(url: string): Promise<string> {
  const browser = await puppeteer.launch({ 
    headless: 'new', // 推荐使用新版无头模式，兼容性更好
    defaultViewport: null // 使用页面默认视口，避免截断内容
  });
  const page = await browser.newPage();
  
  // 显式允许图片加载（默认已开启，此设置更稳妥）
  await page.setRequestInterception(false);
  
  await page.goto(url, { waitUntil: "networkidle0" });

  await page.evaluate(async () => {
    // 等待所有<img>标签加载完成
    const waitForImgs = async () => {
      const imgs = Array.from(document.querySelectorAll("img"));
      await Promise.all(imgs.map(img => {
        if (img.complete) return Promise.resolve();
        return new Promise((resolve) => {
          img.addEventListener("load", resolve);
          img.addEventListener("error", resolve); // 忽略加载失败的图片，避免阻塞流程
        });
      }));
    };

    // 等待所有CSS背景图片加载完成
    const waitForBackgroundImgs = async () => {
      const elements = Array.from(document.querySelectorAll("*"));
      const backgroundImgUrls = elements
        .map(el => getComputedStyle(el).backgroundImage)
        .filter(url => url !== "none")
        .map(url => url.replace(/^url\(['"]?(.*?)['"]?\)$/, "$1")) // 提取背景图URL
        .filter(url => url.startsWith("http")); // 过滤本地相对路径（可根据需求调整）

      await Promise.all(backgroundImgUrls.map(url => {
        return new Promise((resolve) => {
          const img = new Image();
          img.src = url;
          img.onload = resolve;
          img.onerror = resolve; // 忽略加载失败的背景图
        });
      }));
    };

    // 并行等待两种图片加载完成
    await Promise.all([waitForImgs(), waitForBackgroundImgs()]);
    
    // 滚动到页面底部，触发懒加载的背景图（如果页面存在懒加载逻辑）
    await new Promise(resolve => window.scrollTo(0, document.body.scrollHeight));
    // 等待滚动后可能加载的内容
    await new Promise(resolve => setTimeout(resolve, 1000));
  });

  const path = generateScreenshotPath();

  await page.screenshot({
    path,
    fullPage: true,
    captureBeyondViewport: true // 确保捕获超出视口的所有内容
  });

  await browser.close();
  return path; // 修复原代码返回值错误，返回正确的截图路径
}

await screeshotFullPage("https://chesskid.com");

关键调整说明 #

• 新增背景图片监听：遍历页面所有元素，提取background-image的URL，通过创建Image对象监听加载状态，确保背景图加载完成后再截图。
• 优化无头模式配置：使用新版无头模式headless: 'new'提升兼容性，设置defaultViewport: null避免视口尺寸限制导致内容截断。
• 修复返回值错误：原代码错误返回browser.close()的结果（无返回值），改为返回截图文件路径。
• 处理懒加载场景：滚动到页面底部触发懒加载内容，再短暂等待确保加载完成，覆盖更多页面场景。
• 容错处理：忽略加载失败的图片，避免个别资源加载问题导致整个截图流程阻塞。

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