คุณภาพของภาพเบราว์เซอร์ที่ไม่มีหัว - โครเมี่ยมหัวขาด, phantom js, slimmer js

ฉันกำลังมองหาข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่เกิดขึ้นภายใต้ประทุนในเบราว์เซอร์ที่ไม่มีหัว ฉันเคยทำงานกับเบราว์เซอร์ที่ไม่มีหัวที่แตกต่างกันในอดีตเช่นslimmerJS , Phantom.jsและHeadless Chromeโดยมีวัตถุประสงค์เพื่อถ่ายภาพหน้าจอในไซต์ต่างๆ

ฉันไม่เคยสร้างภาพที่มีคุณภาพคมชัดสมจริงซึ่งจะคล้ายกับสิ่งที่คุณเห็นในเบราว์เซอร์ดูเหมือนว่าข้อ จำกัด เครื่องมือเช่นนั้นคือคุณภาพสูงสุดที่คุณสามารถทำได้จากนี้ แต่ฉันต้องการที่จะเข้าใจ ทำไมและเป็นไปได้อย่างไรที่จะทำให้ดีขึ้น

โปรดเปรียบเทียบตัวอย่างด้านล่าง

1. ในเว็บไซต์นี้https://en.wikipedia.org/wiki/Main_Pageค้นหาโลโก้ Wikipedia ที่มุมบนซ้าย
2. นี่เป็นภาพหน้าจอของโลโก้ที่ถ่ายโดยหัวขาดผ่านหุ่นเชิด:

หากคุณเปรียบเทียบเว็บไซต์จริงกับภาพหน้าจอคุณจะเห็นว่าภาพนั้นเบลออย่างไร ในตัวอย่างนี้เป็นเพียงรูปภาพ แต่สิ่งนี้เกิดขึ้นกับข้อความ HTML

ตอนนี้ถ้าฉันจะถ่ายภาพหน้าจอโดยใช้คอมพิวเตอร์ไม่ว่าจะเป็น windows, mac, linux ฉันจะได้ภาพหน้าจอคุณภาพดีมากที่ดูเหมือนของจริง

แล้วทำไมสิ่งนี้ถึงเกิดขึ้น ฉันลองทุกสิ่งมาตรฐานเป็นการตั้งค่าภาพหน้าจอด้วยคุณภาพสูงสุดในแต่ละไลบรารีและการตั้งค่าวิวพอร์ตที่ใหญ่พอเพื่อให้ภาพหน้าจอมีความละเอียดที่เหมาะสม นี่คือคุณภาพสูงสุดจริง ๆ ที่คุณจะได้รับจากภาพหน้าจอของเบราว์เซอร์ที่ไม่มีหัวหรือไม่?

การตรัสรู้ในเรื่องนี้จะได้รับการชื่นชม ขอบคุณ!

คุณจะได้ผลลัพธ์ที่ดียิ่งขึ้นโดยตั้งค่าอุปกรณ์ScaleFactorเป็น 2 (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' })
})();

อย่างที่คุณเห็นคุณจะได้รับผลลัพธ์ที่ดีมาก:

ที่มา: https://github.com/puppeteer/puppeteer/issues/571