Kualitas gambar browser tanpa kepala - Chrome tanpa kepala, hantu js, lebih ramping js

11

Saya mencari informasi lebih lanjut tentang apa yang terjadi di bawah kap di browser tanpa kepala. Saya telah bekerja dengan browser tanpa kepala yang berbeda di masa lalu seperti slimmerJS , Phantom.js , dan Headless Chrome , dengan tujuan mengambil tangkapan layar di situs yang berbeda.

Saya tidak pernah dapat menghasilkan gambar yang tampak nyata, berkualitas tajam yang akan menyerupai apa yang Anda lihat di peramban, sepertinya batasan alat, seperti, itulah kualitas maksimum yang dapat Anda peroleh dari ini, tetapi saya ingin memahami mengapa, dan mungkin, bagaimana membuatnya lebih baik.

Silakan bandingkan contoh di bawah ini.

  1. Di situs web ini, https://en.wikipedia.org/wiki/Main_Page , temukan logo Wikipedia di sudut kiri atas.
  2. Ini adalah tangkapan layar dari logo yang diambil oleh chrome tanpa kepala melalui dalang:

masukkan deskripsi gambar di sini

Jika Anda membandingkan situs web asli dengan tangkapan layar, Anda dapat melihat bagaimana gambarnya buram. Dalam contoh ini, ini hanya gambar, tetapi ini juga terjadi dengan teks HTML.

Sekarang, jika saya mengambil screenshot menggunakan komputer saya, baik itu windows, mac, linux, saya akan mendapatkan screenshot kualitas yang sangat baik yang benar-benar terlihat seperti real deal.

Jadi mengapa ini terjadi? Saya mencoba semua hal standar seperti mengatur tangkapan layar dengan kualitas terbaik di setiap perpustakaan, dan mengatur viewport yang cukup besar sehingga tangkapan layar memiliki resolusi yang layak. Apakah ini benar-benar kualitas terbaik yang dapat Anda peroleh dari tangkapan layar browser tanpa kepala?

Setiap pencerahan pada bidang ini akan dihargai. Terima kasih!

node.js screenshot puppeteer google-chrome-headless headless-browser Bruno Smaldone
sumber

Jawaban:

7

Anda akan mendapatkan hasil yang lebih baik dengan mengatur deviceScaleFactor ke 2 (alias emulasikan 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' })
})();

Seperti yang Anda lihat, Anda bisa mendapatkan hasil yang sangat layak:

masukkan deskripsi gambar di sini

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

hardkoded
sumber