Как получить изображения из Chrome

Question

Я пишу тестовый код, который управляет Chrome с использованием протокола Chrome DevTools. После открытия веб-страницы мне нужно получить изображения со страницы. Получить URL-адреса изображений достаточно просто, но я хочу получить реальные изображения из Chrome, не перезагружая их. Это поможет тестам работать намного быстрее из-за ограниченной пропускной способности между клиентом и веб-сервером. Это также поможет тесту симулировать более реалистичное взаимодействие с веб-сервером.

Есть ли способ получить изображения с помощью протокола Chrome DevTools? Я полагаю, что мог бы сделать снимок экрана с каждым изображением, но я бы предпочел получать неизмененные изображения. Или есть способ получить доступ к изображениям из скрипта, который вставляется в браузер?

Answer 1

Я думаю, вы могли бы использовать Кукольник для этого:

Puppeteer - это библиотека узлов, которая предоставляет API высокого уровня для управления Chrome или Chromium по протоколу DevTools. Кукольник по умолчанию работает без головы, но может быть настроен на работу с полным (без головы) 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

Я обычно конвертирую изображение в Base64, используя следующую функцию JavaScript.

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 в изображение напрямую, вызвав canvas.toDataURL ( msdn refrence ).