Başsız tarayıcı görüntü kalitesi - Başsız krom, phantom js, daha ince js


11

Başsız tarayıcılarda kaputun altında neler olduğu hakkında daha fazla bilgi arıyorum. Geçmişte farklı sitelerde ekran görüntüsü almak için slimJJ , Phantom.js ve Headless Chrome gibi farklı başsız tarayıcılarla çalışıyordum .

Tarayıcıda gördüklerinize benzeyecek gerçek görünümlü, keskin kalitede bir görüntü oluşturmadım, bir araç sınırlamasına benziyor, örneğin, bundan çıkabileceğiniz maksimum kalite, ancak anlamak istiyorum neden ve muhtemelen nasıl daha iyi hale getirileceği.

Lütfen aşağıdaki örnekleri karşılaştırın.

  1. Bu web sitesinde, https://en.wikipedia.org/wiki/Main_Page , sol üst köşedeki Wikipedia logosunu bulun.
  2. Bu logo, başsız krom tarafından kuklacı tarafından alınan bir ekran görüntüsü:

resim açıklamasını buraya girin

Gerçek web sitesini ekran görüntüsüyle karşılaştırırsanız, görüntünün nasıl bulanıklaştığını görebilirsiniz. Bu örnekte, bu yalnızca bir resimdir, ancak bu HTML metninde de olur.

Şimdi, bilgisayarımı kullanarak bir ekran görüntüsü alacak olsaydım, windows, mac, linux olsun, tamamen gerçek anlaşma gibi görünen çok kaliteli bir ekran görüntüsü alırdım.

Peki bu neden oluyor? Her standart kütüphanede ekran görüntüsünü en iyi kalitede ayarlamak ve ekran görüntüsünün iyi bir çözünürlüğe sahip olması için yeterince büyük bir görünüm ayarlamak gibi tüm standart şeyleri denedim. Bu gerçekten başsız bir tarayıcı ekran görüntüsünden alabileceğiniz en kaliteli mi?

Bu alandaki herhangi bir aydınlanma takdir edilecektir. Teşekkürler!

Yanıtlar:


7

DeviceScaleFactor değerini 2 olarak ayarlayarak daha iyi sonuçlar elde edersiniz (aka emulate 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' })
})();

Gördüğünüz gibi, çok iyi sonuçlar alabilirsiniz:

resim açıklamasını buraya girin

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

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.