হেডলেস ব্রাউজার চিত্রের গুণমান - হেডলেস ক্রোম, ফ্যান্টম জেএস, স্লিমার জেএস

Question

আমি হেডলেস ব্রাউজারগুলিতে হুডের নীচে কী ঘটে যায় সে সম্পর্কে আরও তথ্যের সন্ধান করছি। আমি অতীতে বিভিন্ন সাইটগুলিতে স্ক্রিনশট নেওয়ার উদ্দেশ্যে স্লিমার জেএস , ফ্যান্টম.জেস এবং হেডলেস ক্রোমের মতো বিভিন্ন হেডলেস ব্রাউজারের সাথে কাজ করছি ।

আমি কখনই একটি আসল চেহারা, তীক্ষ্ণ-মানের চিত্র তৈরি করতে পারি নি যা ব্রাউজারে আপনি যা দেখেন তার অনুরূপ, এটি একটি সরঞ্জামের সীমাবদ্ধতার মতো লাগে, যেমন এটি আপনি সর্বাধিক মানের থেকে বেরিয়ে আসতে পারেন তবে আমি বুঝতে চাই কেন এবং সম্ভবত এটি কীভাবে আরও উন্নত করা যায়।

নীচের উদাহরণগুলির সাথে তুলনা করুন।

1. এই ওয়েবসাইটটিতে, https://en.wikedia.org/wiki/Main_Page , বাম কোণে উইকিপিডিয়া লোগোটি সন্ধান করুন।
2. এটি পুতুলের মাধ্যমে হেডলেস ক্রোম দ্বারা নেওয়া সেই লোগোটির একটি স্ক্রিনশট:

আপনি যদি স্ক্রিনশট বনাম আসল ওয়েবসাইটের তুলনা করেন, আপনি দেখতে পাবেন যে চিত্রটি কীভাবে ঝাপসা হয়ে গেছে। এই উদাহরণে, এটি কেবল একটি চিত্র, তবে এটি HTML পাঠ্যের সাথেও ঘটে।

এখন, আমি যদি আমার কম্পিউটার ব্যবহার করে একটি স্ক্রিনশট গ্রহণ করি তবে এটি উইন্ডো, ম্যাক, লিনাক্স হোক, আমি একটি খুব ভাল মানের স্ক্রিনশট পেয়ে যা পুরোপুরি আসল চুক্তির মতো দেখায়।

সুতরাং কেন এই ঘটবে? প্রতিটি লাইব্রেরিতে শীর্ষ মানের সাথে স্ক্রিনশট সেট করা এবং একটি বিশাল যথেষ্ট ভিউপোর্ট সেট করা হিসাবে আমি সমস্ত স্ট্যান্ডার্ড জিনিস চেষ্টা করেছিলাম যাতে স্ক্রিনশটের একটি শালীন রেজোলিউশন থাকে। আপনি কি মাথা বিহীন ব্রাউজারের স্ক্রিনশট থেকে পাওয়া সত্যিই এটি শীর্ষ মানের?

এই অঞ্চলে যে কোনও আলোকিতকরণ প্রশংসিত হবে। ধন্যবাদ!

Answer 1

ডিভাইসস্কেলফ্যাক্টরটি 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