পেজের স্ক্রিনশট নেওয়া এবং কাস্টমাইজ করা

PhantomJS একটি headless browser (মানে গ্রাফিক্যাল ইউজার ইন্টারফেস ছাড়া ব্রাউজার) যা JavaScript এবং WebKit এর মাধ্যমে Web Automation এর কাজ করতে সক্ষম। এটি headless থাকার কারণে কোনো UI ছাড়াই ওয়েব পেজের স্ক্রিনশট, পেজের কনটেন্ট পরীক্ষা এবং ওয়েব স্ক্র্যাপিং ইত্যাদি কাজ করতে পারে। PhantomJS সাধারণত সার্ভার সাইড স্ক্রিপ্টিং, সিআরএম (Content Rendering Management), অটোমেশন এবং টেস্টিংয়ের জন্য ব্যবহৃত হয়।

এখানে PhantomJS ব্যবহার করে পেজের স্ক্রিনশট নেওয়া এবং কাস্টমাইজ করা সম্পর্কে আলোচনা করা হলো:

1. PhantomJS এর মাধ্যমে পেজের স্ক্রিনশট নেওয়া

PhantomJS স্ক্রিনশট নিতে খুবই সহজ। আপনি PhantomJS এর স্ক্রিপ্ট ব্যবহার করে পুরো ওয়েব পেজ বা পেজের নির্দিষ্ট অংশের স্ক্রিনশট নিতে পারেন। নিচে একটি সহজ উদাহরণ দেওয়া হলো:

Basic Screenshot Example:

var page = require('webpage').create();  // Create a new page instance

// Open a URL
page.open('http://example.com', function(status) {
    if (status === "success") {
        page.render('example.png');  // Save screenshot as 'example.png'
    }
    phantom.exit();  // Exit PhantomJS after completion
});

Explanation:

1. require('webpage').create(): এটি একটি নতুন পেজ অবজেক্ট তৈরি করে।
2. page.open(): নির্দিষ্ট URL টি খোলে এবং যখন পেজ লোড হয়ে যাবে, তখন callback ফাংশনটি চালানো হবে।
3. page.render('example.png'): এটি পেজের সম্পূর্ণ স্ক্রিনশট নেয় এবং 'example.png' নামে ফাইল সেভ করে।
4. phantom.exit(): স্ক্রিপ্টটি শেষ হলে PhantomJS প্রক্রিয়া বন্ধ করে দেয়।

2. PhantomJS এ স্ক্রিনশট কাস্টমাইজ করা

PhantomJS তে আপনি স্ক্রিনশটকে আরও কাস্টমাইজ করতে পারেন। যেমন:

• পেজের নির্দিষ্ট অংশের স্ক্রিনশট নেওয়া
• স্ক্রিনশটের আকার (dimensions) কাস্টমাইজ করা
• স্ক্রিনশটের কোয়ালিটি নিয়ন্ত্রণ করা

Example: Taking Screenshot of Specific Area

var page = require('webpage').create();  // Create a new page instance

// Open a URL
page.open('http://example.com', function(status) {
    if (status === "success") {
        // Set the viewport size to the desired area
        page.viewportSize = { width: 1280, height: 1024 };

        // Capture a screenshot of a specific part of the page
        page.clipRect = { top: 50, left: 50, width: 800, height: 600 };  // Defining the area to capture
        page.render('example-area.png');  // Save the specific area as a screenshot
    }
    phantom.exit();  // Exit PhantomJS after completion
});

Explanation:

1. page.viewportSize: পেজের ভিউপোর্টের আকার নির্ধারণ করা হয়েছে, যাতে পুরো পেজের স্ক্রিনশট নেয়া যায় বা একটি নির্দিষ্ট অংশের স্ক্রিনশট নেয়া যায়।
2. page.clipRect: এই সেটিংটি পেজের স্ক্রিনশট নেওয়ার জন্য একটি নির্দিষ্ট এলাকা কাস্টমাইজ করে। এখানে top, left, width, height এর মান নির্ধারণ করে পেজের একটি নির্দিষ্ট অংশের স্ক্রিনশট নেওয়া হবে।
3. page.render('example-area.png'): পেজের কাস্টমাইজড অংশের স্ক্রিনশট নেওয়া হয় এবং সেভ করা হয়।

3. PhantomJS স্ক্রিনশটের কোয়ালিটি কাস্টমাইজ করা

PhantomJS তে আপনি স্ক্রিনশটের কোয়ালিটি এবং ফাইল ফরম্যাটও কাস্টমাইজ করতে পারেন।

Example: Adjusting Quality and Format

var page = require('webpage').create();  // Create a new page instance

// Open a URL
page.open('http://example.com', function(status) {
    if (status === "success") {
        // Set the viewport size
        page.viewportSize = { width: 1280, height: 1024 };

        // Save the screenshot in JPEG format with 80% quality
        page.render('example-quality.jpg', { format: 'jpg', quality: 80 });
    }
    phantom.exit();  // Exit PhantomJS after completion
});

Explanation:

1. page.render('example-quality.jpg', { format: 'jpg', quality: 80 }): এটি স্ক্রিনশটকে JPEG ফরম্যাটে সেভ করে এবং কোয়ালিটি ৮০% এ সেট করে।
2. আপনি PNG বা JPEG ফরম্যাটে স্ক্রিনশট নিতে পারেন এবং কোয়ালিটি নির্ধারণ করতে পারেন, যেমন PNG ফরম্যাটে কোয়ালিটি ১০০% থাকে, কিন্তু JPEG এ কোয়ালিটি কমানো সম্ভব।

4. PhantomJS তে স্ক্রিনশটের আকার এবং রেজোলিউশন

PhantomJS তে স্ক্রিনশটের রেজোলিউশন এবং আকার পরিবর্তন করার জন্য page.viewportSize সেটিং ব্যবহার করতে হয়।

Example: Full Page Screenshot

var page = require('webpage').create();  // Create a new page instance

// Open a URL
page.open('http://example.com', function(status) {
    if (status === "success") {
        // Set a large viewport size to capture the full page
        page.viewportSize = { width: 1920, height: 1080 };
        
        // Capture the entire page's screenshot
        page.render('fullpage-example.png');  
    }
    phantom.exit();  // Exit PhantomJS after completion
});

Explanation:

1. page.viewportSize: এখানে, পেজের পুরো স্ক্রিনশট নেওয়ার জন্য বড় আকারের ভিউপোর্ট সাইজ সেট করা হয়েছে। এটি সম্পূর্ণ পেজের স্ক্রিনশট নিতে সাহায্য করে।

5. PhantomJS তে স্ক্রিনশটের জন্য পেজ লোড সময় বাড়ানো

যখন পেজ লোড হওয়ার পর স্ক্রিনশট নিতে হয়, তখন কিছু সময় পেজ লোড হতে এবং সম্পূর্ণভাবে রেন্ডার হতে পারে। আপনি PhantomJS স্ক্রিপ্টে অপেক্ষা করার সময় নির্ধারণ করে পেজের সম্পূর্ণ লোড নিশ্চিত করতে পারেন।

Example: Wait for Page to Load Before Taking Screenshot

var page = require('webpage').create();  // Create a new page instance

// Open a URL
page.open('http://example.com', function(status) {
    if (status === "success") {
        // Wait for a specific element to load
        page.onLoadFinished = function(status) {
            if (status === "success") {
                // Now capture the screenshot
                page.render('example-final.png');
                phantom.exit();  // Exit PhantomJS after completion
            }
        };
    } else {
        phantom.exit();  // Exit PhantomJS if page loading fails
    }
});

Explanation:

1. page.onLoadFinished: এটি পেজের লোড সম্পূর্ণ হলে স্ক্রিনশট নেওয়ার জন্য প্রস্তুত হয়।
2. এইভাবে আপনি নিশ্চিত করতে পারেন যে স্ক্রিনশট নেওয়ার আগে পেজ সম্পূর্ণরূপে লোড হয়েছে।

PhantomJS একটি শক্তিশালী টুল যা headless ব্রাউজার হিসেবে কাজ করে এবং এটি screen capture বা স্ক্রিনশট নেওয়ার জন্য খুবই কার্যকর। আপনি সহজেই PhantomJS এর মাধ্যমে স্ক্রিনশট নিতে পারেন, স্ক্রিনশটের আকার কাস্টমাইজ করতে পারেন, ফরম্যাট এবং কোয়ালিটি নিয়ন্ত্রণ করতে পারেন, এবং সম্পূর্ণ পেজ বা নির্দিষ্ট অংশের স্ক্রিনশট নিতে পারেন। PhantomJS আপনার ওয়েব স্ক্র্যাপিং, সিআরএম, এবং টেস্টিং কাজগুলিকে আরও স্বয়ংক্রিয় এবং দক্ষ করে তোলে।