如何在Puppeteer中直接提取原始RGBA像素数据而非PNG编码截图

你可以通过在页面上下文将HTML内容绘制到Canvas，直接获取ImageData的原始RGBA字节数据，完全跳过PNG编解码步骤，大幅节省耗时。

核心方案（原生Chrome API，无外部依赖） #

利用Chrome特有的CanvasRenderingContext2D.drawWindow方法，将整个页面渲染到Canvas，再提取原始RGBA数据：

// 先获取页面实际滚动尺寸
const { width, height } = await page.evaluate(() => ({
  width: document.documentElement.scrollWidth,
  height: document.documentElement.scrollHeight
}));

// 在页面上下文捕获RGBA原始数据
const rgbaDataArray = await page.evaluate((pageWidth, pageHeight) => {
  // 创建与页面尺寸匹配的Canvas
  const canvas = document.createElement('canvas');
  canvas.width = pageWidth;
  canvas.height = pageHeight;
  const ctx = canvas.getContext('2d');

  // 绘制整个页面到Canvas，最后一个参数是背景色（避免透明背景问题）
  ctx.drawWindow(window, 0, 0, pageWidth, pageHeight, 'rgb(255, 255, 255)');

  // 获取ImageData，其data属性是包含RGBA的Uint8ClampedArray
  const imageData = ctx.getImageData(0, 0, pageWidth, pageHeight);
  // 转成普通数组（Puppeteer可跨上下文序列化传递）
  return Array.from(imageData.data);
}, width, height);

// 转成Node.js Buffer方便后续像素处理
const rgbaBuffer = Buffer.from(rgbaDataArray);

// 示例：获取坐标(x,y)处的RGBA值
const getPixelRGBA = (x, y) => {
  const pixelIndex = (y * width + x) * 4;
  return {
    r: rgbaBuffer[pixelIndex],
    g: rgbaBuffer[pixelIndex + 1],
    b: rgbaBuffer[pixelIndex + 2],
    a: rgbaBuffer[pixelIndex + 3]
  };
};

注意事项 #

• drawWindow是Chrome/Chromium专属API，Puppeteer基于该内核，可稳定使用
• 若页面包含跨域资源，需提前设置await page.setBypassCSP(true)避免绘制失败
• 大尺寸页面的数组序列化会有轻微开销，但远低于PNG编解码的耗时

备选方案（兼容更多场景，需引入外部库） #

如果不想依赖Chrome专属API，可通过注入html2canvas库实现DOM到Canvas的渲染：

// 注入html2canvas到页面上下文
await page.addScriptTag({ url: 'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js' });

// 捕获RGBA数据
const rgbaDataArray = await page.evaluate(() => {
  return html2canvas(document.documentElement).then(canvas => {
    const imageData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
    return Array.from(imageData.data);
  });
});

const rgbaBuffer = Buffer.from(rgbaDataArray);

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