如何从Chrome获取图像

Question

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

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

Answer 1

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

Puppeteer 是一个 Node 库，它提供了一个高级 API 来控制 Chrome 或 Chromium 通过 DevTools 协议。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('https://stackoverflow.com/q/55366906/1244884');
  await browser.close();
});

Answer 2

我通常使用以下JavaScript函数将图像转换为Base64。

function toBase64Uri(img){
    let canvas = document.createElement("canvas");
    canvas.height = img.naturalHeight;
    canvas.width = img.naturalWidth;
    canvas.getContext("2d").drawImage(img, 0, 0);
    return canvas.toDataURL();
}

(可选(可以通过调用 canvas.toDataURL (msdn 引用( 直接将画布元素转换为图像。