Qualidade de imagem do navegador sem cabeça - cromo sem cabeça, js fantasma, js mais fino

Estou procurando mais informações sobre o que acontece nos navegadores sem cabeça. Eu tenho trabalhado com diferentes navegadores sem cabeça no passado, como SlimmerJS , Phantom.js e Headless Chrome , com o objetivo de capturar capturas de tela em sites diferentes.

Eu nunca consegui gerar uma imagem de qualidade real e com aparência real que se parecesse com o que você vê no navegador, parece uma limitação de ferramenta, tipo, é a qualidade máxima que você pode obter disso, mas eu quero entender por que e, possivelmente, como torná-lo melhor.

Por favor, compare os exemplos abaixo.

1. Neste site, https://en.wikipedia.org/wiki/Main_Page , encontre o logotipo da Wikipedia no canto superior esquerdo.
2. Esta é uma captura de tela desse logotipo tirada pelo chrome sem cabeça através do marionetista:

Se você comparar o site real com a captura de tela, poderá ver como a imagem está embaçada. Neste exemplo, é apenas uma imagem, mas isso também acontece com o texto HTML.

Agora, se eu fizesse uma captura de tela usando o meu computador, seja windows, mac, linux, obteria uma captura de tela de qualidade muito boa que se parece completamente com o negócio real.

Então porque isso acontece? Tentei todas as coisas padrão, definindo a captura de tela com qualidade superior em cada biblioteca e definindo uma janela de visualização suficientemente grande para que a captura de tela tenha uma resolução decente. Essa é realmente a qualidade superior que você pode obter de uma captura de tela sem navegador?

Qualquer esclarecimento nesta área seria apreciado. Obrigado!

Você obterá melhores resultados configurando o deviceScaleFactor para 2 (também conhecido como emular retina):

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

Como você pode ver, você pode obter resultados muito decentes:

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