Качество изображения в браузере без головы - без головы, phantom js, slimmer js

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

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

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

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

введите описание изображения здесь

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

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

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

Приветствуется любое просветление в этой области. Спасибо!


node.js javascript puppeteer google-chrome-headless webautomation
person Bruno Smaldone    schedule 27.12.2019    source источник

Ответы (1)


arrow_upward
12
arrow_downward

Вы получите лучшие результаты, установив для 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

person hardkoded    schedule 07.01.2020