Qualité d'image du navigateur sans tête - Chrome sans tête, J fantôme, J plus mince

Je cherche plus d'informations sur ce qui se passe sous le capot dans les navigateurs sans tête. J'ai travaillé avec différents navigateurs sans tête dans le passé, tels que slimmerJS , Phantom.js et Headless Chrome , dans le but de prendre des captures d'écran sur différents sites.

Je n'ai jamais réussi à générer une image réelle et de qualité nette qui ressemblerait à ce que vous voyez dans le navigateur, cela ressemble à une limitation d'outil, comme, c'est la qualité maximale que vous pouvez en tirer, mais je veux comprendre pourquoi, et éventuellement, comment l'améliorer.

Veuillez comparer les exemples ci-dessous.

1. Dans ce site Web, https://en.wikipedia.org/wiki/Main_Page , trouvez le logo Wikipedia dans le coin supérieur gauche.
2. Voici une capture d'écran de ce logo prise par chrome sans tête via le marionnettiste:

Si vous comparez le vrai site Web à la capture d'écran, vous pouvez voir comment l'image est floue. Dans cet exemple, ce n'est qu'une image, mais cela se produit également avec du texte HTML.

Maintenant, si je devais faire une capture d'écran en utilisant mon ordinateur, que ce soit Windows, Mac, Linux, j'aurais une capture d'écran de très bonne qualité qui ressemble complètement à la vraie affaire.

Alors pourquoi cela se produit-il? J'ai essayé toutes les choses standard comme définir la capture d'écran avec une qualité supérieure dans chaque bibliothèque et définir une fenêtre suffisamment grande pour que la capture d'écran ait une résolution décente. Est-ce vraiment la meilleure qualité que vous pouvez obtenir d'une capture d'écran de navigateur sans tête?

Tout éclaircissement sur ce domaine serait apprécié. Merci!

Vous obtiendrez de meilleurs résultats en définissant deviceScaleFactor sur 2 (aka émuler la rétine):

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

Comme vous pouvez le voir, vous pouvez obtenir des résultats très décents:

Source: https://github.com/puppeteer/puppeteer/issues/571