Jakość obrazu bez przeglądarki - Bezgłowy chrom, phantom js, cieńszy js

Szukam więcej informacji o tym, co dzieje się pod maską w przeglądarkach bezgłowych. W przeszłości pracowałem z różnymi przeglądarkami bezgłowymi, takimi jak slimmerJS , Phantom.js i Headless Chrome , w celu robienia zrzutów ekranu w różnych witrynach.

Nigdy nie udało mi się wygenerować realistycznie wyglądającego obrazu o ostrej jakości, który przypominałby to, co widzisz w przeglądarce. Wygląda jak ograniczenie narzędzia, to znaczy maksymalna jakość, jaką możesz z tego uzyskać, ale chcę to zrozumieć dlaczego i być może jak to zrobić lepiej.

Porównaj poniższe przykłady.

Na tej stronie https://en.wikipedia.org/wiki/Main_Page znajdź logo Wikipedii w lewym górnym rogu.
Oto zrzut ekranu tego logo wykonanego przez bezgłowy chrom przez lalkarza:

Jeśli porównasz rzeczywistą stronę internetową ze zrzutem ekranu, możesz zobaczyć, jak obraz jest zamazany. W tym przykładzie jest to tylko obraz, ale dzieje się tak również z tekstem HTML.

Teraz, gdybym miał zrobić zrzut ekranu za pomocą mojego komputera, czy to Windowsa, Maca, Linuksa, dostałbym zrzut ekranu bardzo dobrej jakości, który wygląda zupełnie jak prawdziwa okazja.

Dlaczego tak się dzieje? Próbowałem wszystkich standardowych rzeczy, takich jak ustawienie zrzutu ekranu z najwyższą jakością w każdej bibliotece i ustawienie wystarczająco dużego obszaru wyświetlania, aby zrzut ekranu miał przyzwoitą rozdzielczość. Czy to naprawdę najwyższa jakość, jaką można uzyskać z zrzutu ekranu przeglądarki bezgłowej?

Wszelkie oświecenie w tej dziedzinie byłoby mile widziane. Dzięki!

— Bruno Smaldone
źródło

Uzyskasz lepsze wyniki, ustawiając deviceScaleFactor na 2 (aka emuluj siatkówkę):

(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' })
})();

Jak widać, możesz uzyskać bardzo przyzwoite wyniki:

Źródło: https://github.com/puppeteer/puppeteer/issues/571

— zakłopotany
źródło