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('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 refrence）将canvas元素直接转换为图像。

如何从Chrome获取图像

2 个答案: