如何从 Chrome 获取图像

Question

我正在编写一些使用 Chrome DevTools 协议控制 Chrome 的测试代码。打开网页后，我需要从页面中获取图像。获取图像 URL 很容易，但我想从 Chrome 获取实际图像而无需重新下载它们。由于测试客户端和 Web 服务器之间的带宽有限，这将有助于测试运行得更快。它还有助于测试模拟与 Web 服务器更真实的交互。

有没有办法使用 Chrome DevTools 协议获取图像？我想我可以截取每张图像的屏幕截图，但我更喜欢获得未更改的图像。或者，有没有办法从注入浏览器的脚本中访问图像？

Answer 1

我认为你可以使用Puppeteer来实现这一点：

Puppeteer 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。Puppeteer 默认运行无头，但可以配置为运行完整（非无头）Chrome 或 Chromium。

这是一个脚本，可以访问这个问题并在加载所有图像后立即将它们保存到磁盘上：

const {writeFileSync} = require('fs');
const puppeteer = require('puppeteer');

let counter = 0;

const whenImage = fn => async res => {
  const contentType = res.headers()['content-type']
  if (contentType && contentType.startsWith('image/')) {
    fn(await res.buffer());
  }
};

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('response', whenImage(content => writeFileSync(`img_${counter++}`, content)));
  await page.goto('/sf/ask/3875683451/');
  await browser.close();
});