हेडलेस ब्राउजर इमेज क्वालिटी - हेडलेस क्रोम, फैंटम js, स्लिमर js

Question

मैं हेडलेस ब्राउज़रों में हुड के तहत क्या करता है, इस बारे में अधिक जानकारी की तलाश कर रहा हूं। मैं इस तरह के रूप में अतीत में विभिन्न नेतृत्वहीन ब्राउज़रों के साथ काम कर रहा है slimmerJS , Phantom.js और बिना सिर क्रोम , विभिन्न साइटों में स्क्रीनशॉट लेने के उद्देश्य के साथ।

मुझे कभी भी वास्तविक-दिखने वाली, तेज-गुणवत्ता वाली छवि उत्पन्न करने के लिए नहीं मिला, जो आप ब्राउज़र में दिखते हैं, यह एक उपकरण सीमा जैसा दिखता है, जैसे, यह वह अधिकतम गुणवत्ता है जिससे आप इससे बाहर निकल सकते हैं, लेकिन मैं समझना चाहता हूं क्यों, और संभवतः, इसे बेहतर कैसे बनाया जाए।

कृपया नीचे दिए गए उदाहरणों की तुलना करें।

1. इस वेबसाइट में, https://en.wikipedia.org/wiki/Main_Page , शीर्ष-बाएँ कोने में विकिपीडिया लोगो ढूंढें।
2. यह उस लोगो का स्क्रीनशॉट है जिसे कठपुतली के माध्यम से बिना सिर के क्रोम द्वारा लिया गया है:

यदि आप वास्तविक वेबसाइट बनाम स्क्रीनशॉट की तुलना करते हैं, तो आप देख सकते हैं कि छवि कैसे धुंधली है। इस उदाहरण में, यह सिर्फ एक छवि है, लेकिन यह HTML पाठ के साथ भी होता है।

अब, अगर मुझे अपने कंप्यूटर का उपयोग करके स्क्रीनशॉट लेना है, तो यह विंडोज़, मैक, लिनक्स है, मुझे एक बहुत अच्छी गुणवत्ता वाला स्क्रीनशॉट मिलेगा जो पूरी तरह से वास्तविक सौदे की तरह दिखता है।

तो ऐसा क्यों होता है? मैंने प्रत्येक पुस्तकालय में शीर्ष गुणवत्ता के साथ स्क्रीनशॉट सेट करने के रूप में सभी मानक चीजों की कोशिश की, और एक बड़ा पर्याप्त व्यूपोर्ट स्थापित किया ताकि स्क्रीनशॉट का एक सभ्य संकल्प हो। क्या यह वास्तव में शीर्ष गुणवत्ता है जो आप बिना सिर वाले ब्राउज़र स्क्रीनशॉट से प्राप्त कर सकते हैं?

इस क्षेत्र पर किसी भी ज्ञान की सराहना की जाएगी। धन्यवाद!

Answer 1

आपको डिवाइस सेट करने के लिए बेहतर परिणाम मिलेंगे 2 के लिएSSaleFactor (उर्फ इम्यूलेट रेटिना):

(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