Якість зображення без браузера - хром без голови, фантом js, стрункіший js


11

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

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

Порівняйте, будь ласка, приклади нижче.

  1. На цьому веб-сайті https://en.wikipedia.org/wiki/Main_Page знайдіть логотип Вікіпедії у верхньому лівому куті.
  2. Це скріншот цього логотипу, зроблений хроматографом без голови через лялечку:

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

Якщо порівняти реальний веб-сайт із скріншотом, то можна побачити, як зображення розмивається. У цьому прикладі це лише зображення, але це також відбувається з текстом HTML.

Тепер, якби я робив знімок екрана за допомогою комп’ютера, будь то windows, mac, linux, я отримав би дуже хороший знімок якості, який повністю виглядає як справжня угода.

То чому це відбувається? Я спробував усі стандартні речі, як встановлення екрана з найвищою якістю в кожній бібліотеці та встановлення достатньо великого вікна перегляду, щоб знімок екрана мав гідне дозвіл. Це справді найвища якість, яку ви можете отримати зі скріншоту безголового браузера?

Будь-яке просвітлення в цій області було б вдячно. Дякую!

Відповіді:


7

Ви отримаєте кращі результати, встановивши 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/isissue/571

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.