以Puppeteer + Node.js进行通用全屏网页截图方案（第三部分）：页面处理

前言

在前两篇文章中，我们已经介绍了Puppeteer + Node.js实现通用全屏网页截图方案的基本功能和常用参数。在本文中，我们将深入探讨页面处理的技巧，以获得更好的截图效果。

如何在页面中判断图片已加载完成

在网页截图中，图片的加载情况对截图效果有很大影响。如果图片未加载完成，则在截图中可能会出现空白或损坏的图片。因此，在进行截图之前，我们需要判断页面中的图片是否已加载完成。

使用Puppeteer的waitForLoad()方法

Puppeteer提供了waitForLoad()方法，可以等待页面中的所有资源加载完成。使用此方法可以确保在截图之前，页面中的图片已全部加载完成。

await page.waitForLoad();

使用Puppeteer的evaluate()方法

Puppeteer的evaluate()方法允许我们在页面中执行JavaScript代码。我们可以使用evaluate()方法来判断页面中的图片是否已加载完成。

以下示例展示了如何使用evaluate()方法判断图片是否已加载完成：

const isImageLoaded = await page.evaluate(() => {
  const images = document.querySelectorAll('img');
  for (const image of images) {
    if (!image.complete) {
      return false;
    }
  }
  return true;
});

if (isImageLoaded) {
  // 截图
}

使用自定义的JavaScript函数

我们还可以自定义JavaScript函数来判断图片是否已加载完成。例如，我们可以使用以下JavaScript函数：

function isImageLoaded(image) {
  return image.complete && image.naturalWidth > 0 && image.naturalHeight > 0;
}

然后，我们可以使用evaluate()方法来调用自定义的JavaScript函数：

const isImageLoaded = await page.evaluate((image) => {
  return isImageLoaded(image);
}, image);

if (isImageLoaded) {
  // 截图
}

主动调用注入函数进行截图的场景

通常情况下，Puppeteer会自动在页面加载完成后进行截图。但是，在某些场景下，我们需要主动调用注入函数来进行截图。

业务页面中的截图

在业务页面中，我们通常需要在用户操作之后进行截图。例如，在电商网站上，我们需要在用户点击“购买”按钮之后进行截图。

此时，我们需要主动调用注入函数来进行截图。我们可以使用以下方法：

const screenshot = await page.evaluate(() => {
  return document.documentElement.outerHTML;
});

然后，我们可以将screenshot变量保存到本地文件中。

动态内容的截图

在某些情况下，页面中的内容是动态变化的。例如，在视频网站上，视频播放时画面会不断变化。

此时，我们需要主动调用注入函数来进行截图。我们可以使用以下方法：

const screenshot = await page.evaluate(() => {
  return document.documentElement.outerHTML;
});

然后，我们可以将screenshot变量保存到本地文件中。

结语

在本文中，我们介绍了在Puppeteer + Node.js的通用全屏网页截图方案中，如何处理页面以获得更好的截图效果。我们探讨了判断图片加载完成的技巧，以及如何在业务页面中主动调用注入函数进行截图的方法。希望这些技巧对您有所帮助。