Безголовое качество изображения браузера - безголовый хром, фантом js, стройнее js

Я ищу больше информации о том, что происходит под капотом в безголовых браузерах. В прошлом я работал с различными безголовыми браузерами, такими как slimmerJS , Phantom.js и Headless Chrome , с целью создания скриншотов на разных сайтах.

Мне никогда не удавалось создать реально выглядящее, четкое изображение, которое было бы похоже на то, что вы видите в браузере, это похоже на ограничение инструмента, например, это максимальное качество, которое вы можете получить, но я хочу понять, почему и, возможно, как сделать это лучше.

Пожалуйста, сравните примеры ниже.

На этом веб-сайте https://en.wikipedia.org/wiki/Main_Page найдите логотип Википедии в верхнем левом углу.
Это скриншот этого логотипа, сделанного безголовым хромом через кукловода:

Если вы сравните реальный веб-сайт и скриншот, вы увидите, как изображение размыто. В этом примере это просто изображение, но это также происходит с текстом HTML.

Теперь, если бы я сделал снимок экрана с помощью моего компьютера, будь то Windows, Mac, Linux, я бы получил скриншот очень хорошего качества, который полностью выглядит как реальная сделка.

Так почему это происходит? Я попробовал все стандартные вещи: установить скриншот с высоким качеством в каждой библиотеке и установить достаточно большой видовой экран, чтобы скриншот имел приличное разрешение. Это действительно лучшее качество, которое вы можете получить из скриншота браузера без головы?

Любое просвещение в этой области будет оценено. Спасибо!

— Бруно Смалдоне
источник

Вы получите лучшие результаты, установив deviceScaleFactor на 2 (он же эмулирует сетчатку):

(async () => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage();
    await page.setViewport({width: 800, height: 800, deviceScaleFactor: 2});
    await page.goto('https://en.wikipedia.org/wiki/Main_Page')

    await page.screenshot({ fullPage: true, path: 'test.png' })
})();

Как видите, вы можете получить очень приличные результаты:

Источник: https://github.com/puppeteer/puppeteer/issues/571

— hardkoded
источник