ヘッドレスブラウザーの画像品質-ヘッドレスクロム、ファントムjs、スリムなjs

ヘッドレスブラウザーの内部で何が行われるかについての詳細な情報を探しています。私はこれまで、slimmerJS、Phantom.js、およびHeadless Chromeなどのさまざまなヘッドレスブラウザーで、さまざまなサイトでスクリーンショットを撮る目的で作業してきました。

ブラウザに表示されるようなリアルでシャープな品質の画像を生成することはできませんでした。これは、ツールの制限のように見えます。これは、これから得られる最高の品質ですが、理解したいと思いますなぜ、そしておそらく、それをより良くする方法。

以下の例を比較してください。

このWebサイト（https://en.wikipedia.org/wiki/Main_Page）の左上隅にWikipediaのロゴがあります。
これは、操り人形師を介してヘッドレスクロムによって撮影されたそのロゴのスクリーンショットです。

実際のウェブサイトとスクリーンショットを比較すると、画像がぼやけていることがわかります。この例では、それは単なる画像ですが、これはHTMLテキストでも発生します。

今、私が自分のコンピュータを使用してスクリーンショットを撮るとしたら、それがWindows、Mac、Linuxであっても、完全に本当のように見える非常に高品質のスクリーンショットが得られます。

なぜこれが起こるのですか？各ライブラリで最高品質のスクリーンショットを設定し、十分な大きさのビューポートを設定してスクリーンショットが適切な解像度になるように、すべての標準的なことを試しました。これは本当に、ヘッドレスブラウザーのスクリーンショットから取得できる最高品質ですか？

この分野についての啓蒙があれば幸いです。ありがとう！

— ブルーノ・スマルドン
ソース

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

— ハードコード
ソース