PhantomJS একটি headless browser যা WebKit ইঞ্জিনের উপর ভিত্তি করে তৈরি। এটি JavaScript চালাতে সক্ষম এবং পুরোপুরি স্ক্রিপ্টিং সক্ষম, অর্থাৎ এটি ব্যবহারকারী ইন্টারফেসের প্রদর্শন ছাড়াই ওয়েব পেজগুলোকে প্রক্রিয়া করতে পারে। PhantomJS ব্যবহার করে আপনি পেজ রেন্ডারিং, স্ক্রিনশট তোলা, এবং বিভিন্ন ধরনের ওয়েব পেজ অপারেশন অটোমেট করতে পারেন।
PhantomJS এর পরিচিতি:
PhantomJS মূলত headless browser (মানে, কোনো গ্রাফিকাল ইউজার ইন্টারফেস (GUI) ছাড়া) হিসেবে কাজ করে। এটি ওয়েব পেজের রেন্ডারিং এবং স্ক্রিপ্টিংয়ে ব্যবহৃত হয়, যেমন Web Scraping, Automated Testing, Page Performance Testing, Screen Capture, এবং আরও অনেক কাজের জন্য। এটি কমান্ড লাইন ইন্টারফেসের মাধ্যমে ব্যবহৃত হয় এবং স্বয়ংক্রিয়ভাবে ওয়েব পেজের উপর কাজ করতে পারে।
PhantomJS ব্যবহার করে পেজ রেন্ডারিং এবং স্ক্রিনশট তোলা
PhantomJS ব্যবহার করে আপনি যেকোনো ওয়েব পেজের স্ক্রিনশট নিতে পারেন বা তার উপাদানগুলো প্রক্রিয়া করতে পারেন। এখানে, PhantomJS দিয়ে পেজ রেন্ডারিং এবং স্ক্রিনশট তোলার একটি সাধারণ উদাহরণ দেখানো হলো।
Step 1: PhantomJS ইনস্টলেশন
প্রথমে, আপনাকে PhantomJS ইনস্টল করতে হবে। আপনি যদি npm ব্যবহার করে থাকেন, তাহলে PhantomJS ইনস্টল করার জন্য নিচের কমান্ডটি ব্যবহার করতে পারেন:
npm install phantomjs --save
অথবা, আপনি PhantomJS এর অফিসিয়াল ওয়েবসাইট থেকে download করে ইনস্টল করতে পারেন।
Step 2: PhantomJS স্ক্রিপ্ট তৈরি করা
একটি PhantomJS স্ক্রিপ্ট তৈরি করতে হবে যাতে পেজ রেন্ডারিং এবং স্ক্রিনশট নেওয়ার কাজ করা হবে। নিচে একটি উদাহরণ দেয়া হল:
// screenshot.js
var page = require('webpage').create(); // Create a new page
// Open a URL
page.open('http://example.com', function(status) {
if (status === 'success') {
// If the page loads successfully, take a screenshot
page.render('screenshot.png'); // Screenshot will be saved as screenshot.png
console.log('Screenshot saved!');
} else {
console.log('Failed to load the page');
}
phantom.exit(); // Exit PhantomJS
});
Step 3: স্ক্রিপ্ট চালানো
এই স্ক্রিপ্টটি PhantomJS দিয়ে রান করাতে, কমান্ড লাইন থেকে নিচের কমান্ডটি ব্যবহার করতে হবে:
phantomjs screenshot.js
যদি স্ক্রিপ্টটি সফলভাবে চলে, এটি http://example.com পেজের একটি স্ক্রিনশট নিবে এবং screenshot.png নামে ফাইলটি সংরক্ষণ করবে।
Step 4: স্ক্রিনশট পর্যালোচনা
স্ক্রিপ্টটি চালানোর পর আপনি আপনার ফোল্ডারে screenshot.png নামে একটি ছবি দেখতে পাবেন, যা PhantomJS এর মাধ্যমে রেন্ডার করা পেজের স্ক্রিনশট হবে।
PhantomJS দিয়ে স্ক্রিনশট তোলার কিছু অতিরিক্ত কনফিগারেশন
Custom Screen Size: আপনি যদি স্ক্রিনশটের জন্য কাস্টম সাইজ সেট করতে চান, তবে আপনি
page.viewportSizeব্যবহার করতে পারেন।page.viewportSize = { width: 1280, height: 1024 }; // Set custom screen size page.render('screenshot.png');Specific Area of the Page: আপনি পুরো পেজের স্ক্রিনশট না নিয়ে, একটি নির্দিষ্ট অংশের স্ক্রিনশট নিতে পারেন।
page.clipRect = { top: 100, left: 100, width: 800, height: 600 }; // Clip a specific part page.render('screenshot.png');Delay before taking the screenshot: আপনি চাইলে পেজটি সম্পূর্ণরূপে লোড হতে সময় দিতে পারেন এবং তারপর স্ক্রিনশট নিতে পারেন।
page.open('http://example.com', function(status) { window.setTimeout(function() { page.render('screenshot.png'); phantom.exit(); }, 5000); // Wait 5 seconds before taking screenshot });
PhantomJS স্ক্রিপ্টের সুবিধা:
- Headless Browsing: PhantomJS কোনো GUI ছাড়াই পেজ রেন্ডার করতে পারে, যা দ্রুত এবং কম রিসোর্স ব্যবহার করে।
- Automated Screenshots: আপনি ওয়েব পেজের স্ক্রিনশট স্বয়ংক্রিয়ভাবে নিতে পারেন, যা ওয়েব ডেভেলপারদের এবং ডিজাইনারদের জন্য খুবই উপকারী।
- Web Scraping: PhantomJS ব্যবহার করে আপনি ওয়েব পেজের উপাদানগুলোর ডাটা সংগ্রহ করতে পারেন, যেমন টেক্সট, ছবি, এবং অন্যান্য তথ্য।
- Page Interaction: PhantomJS এর মাধ্যমে পেজের উপর বিভিন্ন ইন্টারঅ্যাকশন (যেমন ক্লিক, স্ক্রল) করা যায়, এবং সেগুলোর স্ক্রিনশট নেয়া যায়।
PhantomJS দিয়ে স্ক্রিনশট তোলার অন্যান্য ব্যবহার:
- Web Page Performance Testing: PhantomJS ব্যবহার করে পেজ লোডিং স্পিড পরীক্ষা করা যেতে পারে।
- Automated Testing: PhantomJS দিয়ে ওয়েব পেজের বিভিন্ন কাজ পরীক্ষা (test automation) করা যায়।
- Monitoring: ওয়েব পেজে পরিবর্তন বা ইউজার ইন্টারফেসের কোন সমস্যা থাকলে তা ট্র্যাক করা যেতে পারে।
PhantomJS একটি শক্তিশালী টুল যা ওয়েব ডেভেলপমেন্ট, টেস্টিং, এবং স্ক্রিনশট নেয়া সহ বিভিন্ন কাজে ব্যবহৃত হয়। এটি headless browser হিসেবে কাজ করে এবং বিভিন্ন ধরনের ওয়েব পেজ অপারেশন স্বয়ংক্রিয়ভাবে সম্পন্ন করতে পারে, যেমন স্ক্রিনশট নেয়া, পেজ রেন্ডারিং, এবং ইন্টারঅ্যাকশন। PhantomJS ব্যবহার করে আপনি ওয়েব পেজের স্ক্রিনশট নিতে পারেন এবং আরও বিভিন্ন ধরনের প্রক্রিয়া স্বয়ংক্রিয়ভাবে করতে পারেন।
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:
require('webpage').create(): এটি একটি নতুন পেজ অবজেক্ট তৈরি করে।page.open(): নির্দিষ্ট URL টি খোলে এবং যখন পেজ লোড হয়ে যাবে, তখন callback ফাংশনটি চালানো হবে।page.render('example.png'): এটি পেজের সম্পূর্ণ স্ক্রিনশট নেয় এবং'example.png'নামে ফাইল সেভ করে।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:
page.viewportSize: পেজের ভিউপোর্টের আকার নির্ধারণ করা হয়েছে, যাতে পুরো পেজের স্ক্রিনশট নেয়া যায় বা একটি নির্দিষ্ট অংশের স্ক্রিনশট নেয়া যায়।page.clipRect: এই সেটিংটি পেজের স্ক্রিনশট নেওয়ার জন্য একটি নির্দিষ্ট এলাকা কাস্টমাইজ করে। এখানেtop,left,width,heightএর মান নির্ধারণ করে পেজের একটি নির্দিষ্ট অংশের স্ক্রিনশট নেওয়া হবে।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:
page.render('example-quality.jpg', { format: 'jpg', quality: 80 }): এটি স্ক্রিনশটকে JPEG ফরম্যাটে সেভ করে এবং কোয়ালিটি ৮০% এ সেট করে।- আপনি 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:
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:
page.onLoadFinished: এটি পেজের লোড সম্পূর্ণ হলে স্ক্রিনশট নেওয়ার জন্য প্রস্তুত হয়।- এইভাবে আপনি নিশ্চিত করতে পারেন যে স্ক্রিনশট নেওয়ার আগে পেজ সম্পূর্ণরূপে লোড হয়েছে।
PhantomJS একটি শক্তিশালী টুল যা headless ব্রাউজার হিসেবে কাজ করে এবং এটি screen capture বা স্ক্রিনশট নেওয়ার জন্য খুবই কার্যকর। আপনি সহজেই PhantomJS এর মাধ্যমে স্ক্রিনশট নিতে পারেন, স্ক্রিনশটের আকার কাস্টমাইজ করতে পারেন, ফরম্যাট এবং কোয়ালিটি নিয়ন্ত্রণ করতে পারেন, এবং সম্পূর্ণ পেজ বা নির্দিষ্ট অংশের স্ক্রিনশট নিতে পারেন। PhantomJS আপনার ওয়েব স্ক্র্যাপিং, সিআরএম, এবং টেস্টিং কাজগুলিকে আরও স্বয়ংক্রিয় এবং দক্ষ করে তোলে।
PhantomJS হল একটি headless ব্রাউজার, অর্থাৎ এটি একটি পূর্ণাঙ্গ ব্রাউজার হিসেবে কাজ করে, তবে এটি GUI (Graphical User Interface) ছাড়াই চলে। PhantomJS ব্রাউজারটি মূলত JavaScript এবং WebKit প্রযুক্তি ব্যবহার করে তৈরি করা হয়েছে। এটি automated testing, web scraping, এবং screen capture এর মতো কাজগুলির জন্য ব্যবহৃত হয়। PhantomJS এর মাধ্যমে আপনি ওয়েব পেজের নির্দিষ্ট এলিমেন্টের screenshots নিতে পারেন যা একাধিক ক্ষেত্রে উপকারী হতে পারে, যেমন ওয়েব ডিজাইন যাচাই, UI টেস্টিং, বা সাইটের স্ক্রিনশট তৈরি করা।
PhantomJS দিয়ে পেজের নির্দিষ্ট এলিমেন্টের স্ক্রিনশট
PhantomJS ব্যবহার করে আপনি পুরো পেজের স্ক্রিনশট নিতে পারেন অথবা পেজের নির্দিষ্ট এলিমেন্টের স্ক্রিনশটও নিতে পারেন। এখানে PhantomJS দিয়ে একটি নির্দিষ্ট এলিমেন্টের স্ক্রিনশট নেওয়ার পদ্ধতি বর্ণনা করা হলো।
প্রথমে PhantomJS ইনস্টল করা:
আপনি যদি PhantomJS ইনস্টল না করে থাকেন, তবে এটি আপনার সিস্টেমে ইনস্টল করতে হবে। PhantomJS ইনস্টল করতে নিম্নলিখিত কমান্ডটি ব্যবহার করুন:
Windows:
- Download the latest version from the PhantomJS Download page.
- Extract the archive and add the
phantomjsexecutable to your system's PATH environment variable.
macOS/Linux:
If you have Homebrew installed on macOS or Linux, you can install PhantomJS by running the following command:
brew install phantomjs
Or on Linux, you can use:
sudo apt-get install phantomjs
PhantomJS Script Example:
এখানে একটি PhantomJS স্ক্রিপ্টের উদাহরণ দেওয়া হয়েছে, যা একটি ওয়েব পেজের নির্দিষ্ট এলিমেন্টের স্ক্রিনশট নিবে:
PhantomJS স্ক্রিপ্ট:
var page = require('webpage').create(); // Create a new webpage instance
var url = 'https://example.com'; // URL of the page
var elementSelector = '#specific-element'; // CSS selector for the element
page.open(url, function(status) {
if (status === "success") {
// Wait for the page to fully load
page.evaluate(function(selector) {
var element = document.querySelector(selector);
if (element) {
// Get the bounding rectangle of the element
var rect = element.getBoundingClientRect();
return {
x: rect.left,
y: rect.top,
width: rect.width,
height: rect.height
};
}
}, elementSelector, function(rect) {
if (rect) {
// Take a screenshot of the element using its dimensions
page.clipRect = rect;
page.render('element-screenshot.png'); // Save screenshot as PNG
console.log('Screenshot of element saved as "element-screenshot.png".');
} else {
console.log('Element not found.');
}
phantom.exit(); // Exit PhantomJS
});
} else {
console.log('Page failed to load.');
phantom.exit();
}
});
Explanation:
page.open(url, callback): এটি পেজটি খুলে এবং পেজের লোড হওয়া পরীক্ষা করে।page.evaluate(function): এটি JavaScript কোড পেজের মধ্যে কার্যকর করে, যাelementSelectorদিয়ে নির্দিষ্ট এলিমেন্টের bounding rectangle (position এবং size) বের করে।page.clipRect: এই প্রপার্টি ব্যবহার করে আপনি পেজের নির্দিষ্ট এলিমেন্টের জন্য স্ক্রিনশট সীমাবদ্ধ করতে পারেন।page.render(): এটি স্ক্রিনশট গ্রহণ করে এবং সেই স্ক্রিনশট একটি ফাইল হিসেবে সংরক্ষণ করে (এখানেelement-screenshot.pngনামে)।
স্ক্রিপ্ট রান করার জন্য কমান্ড:
একবার স্ক্রিপ্ট তৈরি হয়ে গেলে, আপনি PhantomJS দিয়ে স্ক্রিপ্টটি রান করতে পারেন। এটি করার জন্য নিচের কমান্ডটি ব্যবহার করুন:
phantomjs screenshot.js
এখানে, screenshot.js হল আপনার PhantomJS স্ক্রিপ্টের নাম।
PhantomJS এর সাহায্যে আরও কিছু সাধারণ স্ক্রিনশট অপশন:
পুরো পেজের স্ক্রিনশট:
page.render('fullpage-screenshot.png');পেজের স্ক্রিনশট একটি নির্দিষ্ট ডাইমেনশনে:
page.viewportSize = { width: 1280, height: 1024 }; page.render('screenshot.png');সাইটের স্ক্রিনশট নিতে ও স্ক্রল করার জন্য:
var page = require('webpage').create(); page.open('https://example.com', function() { page.scrollPosition = { top: 0, left: 0 }; page.render('screenshot.png'); phantom.exit(); });
PhantomJS স্ক্রিপ্টের সাহায্যে আরও কিছু কার্যকলাপ:
- Testing: PhantomJS এর মাধ্যমে আপনি ওয়েবসাইটের ইউজার ইন্টারফেসের বিভিন্ন অংশ পরীক্ষা করতে পারেন।
- Automation: PhantomJS ব্যবহার করে আপনি ওয়েব স্ক্র্যাপিং বা বিভিন্ন ওয়েব অ্যাপ্লিকেশন টেস্টিং অটোমেট করতে পারেন।
- Web Scraping: PhantomJS ওয়েব স্ক্র্যাপিং টুল হিসাবে কাজ করতে পারে, যেটি ডেটা বের করতে ব্যবহার করা হয়।
PhantomJS ব্যবহার করে আপনি কোনো ওয়েব পেজের নির্দিষ্ট এলিমেন্টের স্ক্রিনশট নিতে পারেন। এটি সাধারণত UI testing, web scraping, বা screenshot generation এর জন্য ব্যবহৃত হয়। PhantomJS স্ক্রিপ্টের মাধ্যমে আপনি ওয়েব পেজের যে কোনো এলিমেন্টের ছবি তুলতে এবং সেই ছবি সংরক্ষণ করতে পারেন। এর মাধ্যমে automated testing এবং visual regression testing সহজে করতে পারবেন, যা ওয়েব ডেভেলপমেন্ট প্রক্রিয়াকে আরও দক্ষ করে তোলে।
PhantomJS একটি headless WebKit ভিত্তিক ব্রাউজার যা JavaScript এর মাধ্যমে ওয়েব পেজকে প্রোগ্রামেটিক্যালি পরিচালনা করতে সক্ষম। এটি কোনো UI ছাড়াই ওয়েব পেজের স্ক্রিনশট, রেন্ডারিং, DOM ম্যানিপুলেশন এবং আরও অনেক কাজ করতে ব্যবহৃত হয়। বিশেষ করে ওয়েব পেজের স্ক্রিনশট নেওয়ার জন্য এটি অনেক কার্যকরী। PhantomJS এর সাহায্যে আপনি ওয়েব পেজের ছবি, পিডিএফ এবং অন্যান্য ফরম্যাটে স্ক্রিনশট নিতে পারেন।
PhantomJS দিয়ে স্ক্রিনশট নেওয়া (PNG, JPEG, PDF)
PhantomJS এর মাধ্যমে স্ক্রিনশট নেওয়া অনেক সহজ। আপনি JavaScript কোড ব্যবহার করে পেজ রেন্ডার করতে পারেন এবং এরপর তা বিভিন্ন ফরম্যাটে (PNG, JPEG, PDF) আউটপুট হিসেবে গ্রহণ করতে পারেন।
PhantomJS দিয়ে স্ক্রিনশট নেওয়ার জন্য পদক্ষেপ:
PhantomJS ইনস্টলেশন:
- প্রথমে আপনাকে PhantomJS ইনস্টল করতে হবে। এটি npm বা সরাসরি PhantomJS এর ওয়েবসাইট থেকে ডাউনলোড করা যেতে পারে।
npm মাধ্যমে ইনস্টল:
npm install -g phantomjsPhantomJS স্ক্রিপ্ট তৈরি:
PhantomJS স্ক্রিপ্ট তৈরি করতে JavaScript কোড লিখে আপনি ওয়েব পেজ থেকে স্ক্রিনশট নিতে পারেন।
PhantomJS স্ক্রিপ্ট উদাহরণ:
var page = require('webpage').create(); // Create a new page object
// Set the URL to capture
page.open('https://www.example.com', function(status) {
if (status === "success") {
// Capture screenshot in PNG format
page.render('screenshot.png'); // For PNG format
// Capture screenshot in JPEG format
page.render('screenshot.jpg', { format: 'jpeg', quality: 100 }); // For JPEG format
// Capture screenshot as PDF
page.render('screenshot.pdf', { format: 'pdf' }); // For PDF format
}
phantom.exit(); // Close PhantomJS instance
});
Explanation:
webpage.create(): একটি নতুন ওয়েবপেজ তৈরি করে, যা PhantomJS দ্বারা রেন্ডার করা হবে।page.open(): এটি ওয়েবপেজটি খোলার জন্য ব্যবহৃত হয় এবং পেজের লোড হওয়া অবস্থার উপর ভিত্তি করে স্ক্রিনশট নেওয়ার কাজ সম্পাদিত হয়।page.render(): এটি স্ক্রিনশট গ্রহণ করতে ব্যবহৃত হয় এবং আপনি আউটপুট ফাইল ফরম্যাট নির্বাচন করতে পারেন। এখানে PNG, JPEG, এবং PDF ফরম্যাটে স্ক্রিনশট নেওয়া হচ্ছে।
PhantomJS স্ক্রিপ্ট রান করা:
একটি ফাইল তৈরি করুন, যেমন captureScreenshot.js এবং তারপর PhantomJS দিয়ে স্ক্রিপ্টটি রান করুন:
phantomjs captureScreenshot.js
এর মাধ্যমে, আপনার ওয়েব পেজের স্ক্রিনশটটি screenshot.png, screenshot.jpg, এবং screenshot.pdf ফরম্যাটে তৈরি হয়ে যাবে।
PhantomJS এর অন্যান্য স্ক্রিনশট বিকল্প:
স্ক্রিনশটের সাইজ কাস্টমাইজ করা:
আপনি স্ক্রিনশটের সাইজ কাস্টমাইজ করতে পারেন যাতে এটি পেজের নির্দিষ্ট অংশ বা পুরো পেজের স্ক্রিনশট নেয়।
page.viewportSize = { width: 1280, height: 1024 }; // Set custom viewport size page.render('screenshot.png');ডেলেটেড এলিমেন্টের স্ক্রিনশট নেওয়া:
আপনি নির্দিষ্ট একটি এলিমেন্টের স্ক্রিনশটও নিতে পারেন:
var clipRect = { top: 0, left: 0, width: 500, height: 500 }; // Define a clip area page.clipRect = clipRect; // Set clipping area page.render('elementScreenshot.png');অটোমেটেড স্ক্রিনশটিং এবং ব্রেকপয়েন্টস:
PhantomJS স্বয়ংক্রিয়ভাবে বিভিন্ন ব্রেকপয়েন্টে স্ক্রিনশট নিতে সক্ষম। আপনি বিভিন্ন স্ক্রিন রেজুলেশন অনুযায়ী স্ক্রিনশট নিতে পারেন।
page.viewportSize = { width: 1024, height: 768 }; page.render('tabletScreenshot.png'); page.viewportSize = { width: 1920, height: 1080 }; page.render('desktopScreenshot.png');
PhantomJS দিয়ে স্ক্রিনশট নেওয়ার উপকারিতা:
- Automated Screenshot Capture:
- PhantomJS দিয়ে আপনি ওয়েবসাইটের স্বয়ংক্রিয় স্ক্রিনশট গ্রহণ করতে পারেন, যা ওয়েব ডেভেলপমেন্ট এবং টেস্টিং এর জন্য উপকারী।
- No UI Required (Headless Browser):
- PhantomJS একটি headless browser, তাই এটি কোনও গ্রাফিকাল ইউজার ইন্টারফেস ছাড়াই কাজ করে। এর মানে হল যে, এটি কম্পিউটারের গ্রাফিক্স রিসোর্সকে ব্যবহার না করে ওয়েবপেজ রেন্ডার করতে সক্ষম।
- Performance Monitoring:
- আপনি ওয়েবসাইটের লোড টাইম এবং রেন্ডারিং পারফরম্যান্স মনিটর করতে PhantomJS ব্যবহার করতে পারেন এবং স্ক্রিনশটের মাধ্যমে বিভিন্ন ব্রাউজার বা ডিভাইসে ওয়েবসাইট কেমন দেখায় তা দেখতে পারেন।
- Automated Testing and Documentation:
- PhantomJS ব্যবহার করে আপনি ওয়েবসাইটের স্ক্রিনশটের মাধ্যমে UI testing এবং documentation তৈরি করতে পারেন, বিশেষ করে যখন ডিজাইন চেক করা দরকার।
PhantomJS একটি শক্তিশালী টুল যা স্ক্রিনশট এবং ওয়েব পেজ রেন্ডারিং জন্য ব্যবহৃত হয়। আপনি এটি দিয়ে স্ক্রিনশট নিতে পারেন এবং ওয়েব পেজের বিভিন্ন ফরম্যাটে (PNG, JPEG, PDF) রেন্ডার করতে পারেন। এর মাধ্যমে ওয়েব ডেভেলপাররা স্ক্রিনশট ক্যাপচার, ওয়েব পেজের পারফরম্যান্স ম্যানেজমেন্ট, এবং UI টেস্টিং কার্যক্রম অনেক সহজভাবে করতে পারেন।
PhantomJS একটি headless browser (যার কোন graphical user interface নেই) যা JavaScript, DOM, এবং CSS সমর্থন করে এবং এটি ওয়েব পেজের স্ক্রিনশট নেওয়া, PDF তৈরি করা, বা অন্যান্য ব্রাউজিং কাজ যেমন scraping বা automation করার জন্য ব্যবহৃত হয়। PhantomJS ব্রাউজারের মতো কাজ করলেও এটি ডিসপ্লে বা GUI ছাড়া চলে, যা দ্রুত এবং অনেক বেশি স্কেলেবেল হয়।
এখানে PhantomJS ব্যবহার করে Responsive Design এবং Mobile View এর স্ক্রিনশট নেওয়ার প্রক্রিয়া আলোচনা করা হবে।
PhantomJS দিয়ে Responsive Design এবং Mobile View এর স্ক্রিনশট নেওয়া
PhantomJS ব্যবহার করে আপনি সহজেই একটি পেজের responsive design বা mobile view এর স্ক্রিনশট নিতে পারেন, যেখানে আপনি পেজটি একাধিক ডিভাইসের স্ক্রীন সাইজে প্রদর্শন করে স্ক্রিনশট নিতে পারবেন।
Step 1: PhantomJS ইনস্টল করা
PhantomJS ইনস্টল করতে আপনাকে কম্পিউটার এ PhantomJS ডাউনলোড এবং ইনস্টল করতে হবে। এটি PhantomJS official website থেকে ডাউনলোড করা যেতে পারে।
বিভিন্ন প্যাকেজ ম্যানেজার দিয়ে PhantomJS ইনস্টল করা যায়, যেমন Homebrew (MacOS) বা Chocolatey (Windows)।
Step 2: PhantomJS স্ক্রিপ্ট লিখা
Responsive Design বা Mobile View স্ক্রিনশট নিতে একটি PhantomJS স্ক্রিপ্ট তৈরি করতে হবে। এই স্ক্রিপ্টটি ব্রাউজারের মতো পেজটি লোড করবে এবং নির্দিষ্ট স্ক্রীন সাইজে সেট হয়ে স্ক্রিনশট নিবে।
PhantomJS স্ক্রিপ্ট উদাহরণ:
var webpage = require('webpage').create();
// Set the viewport size for mobile devices
webpage.viewportSize = { width: 375, height: 667 }; // Example for iPhone 6
// Open the webpage
webpage.open('https://example.com', function(status) {
if (status === "success") {
// Take a screenshot and save it as PNG
webpage.render('mobile_view_screenshot.png');
console.log("Screenshot taken for mobile view.");
} else {
console.log("Failed to load the page.");
}
phantom.exit();
});
Explanation:
require('webpage').create(): এই কমান্ড দিয়ে PhantomJS একটি ওয়েবপেজ অবজেক্ট তৈরি করে।viewportSize: এখানেviewportSizeপ্রপার্টি দিয়ে আপনি device screen size সেট করতে পারেন। এটি মোবাইল স্ক্রীন সাইজ অনুযায়ী পরিবর্তিত হবে, যেমনwidth: 375এবংheight: 667যা iPhone 6 এর স্ক্রীন সাইজ।open(): webpage.open ফাংশনটি একটি URL লোড করে এবং পেজটি সম্পূর্ণ লোড হলে এটি callback ফাংশন রান করবে।render(): render() ফাংশনটি স্ক্রিনশট নিবে এবং এটি PNG ফর্ম্যাটে সেভ করবে।phantom.exit(): স্ক্রিপ্ট শেষ হলে PhantomJS প্রক্রিয়াটি বন্ধ করে দিবে।
Step 3: স্ক্রিপ্ট চালানো
PhantomJS স্ক্রিপ্ট চালানোর জন্য, কমান্ড লাইনে স্ক্রিপ্ট ফাইলটি রান করুন:
phantomjs screenshot_script.js
এটি mobile_view_screenshot.png নামে একটি স্ক্রিনশট তৈরি করবে যেটি মোবাইল ভিউ থেকে তোলা হয়েছে।
Responsive Design এর জন্য স্ক্রিনশট নেওয়া
এখন, যদি আপনি বিভিন্ন ডিভাইসের জন্য রেসপন্সিভ স্ক্রিনশট নিতে চান, তাহলে আপনি বিভিন্ন viewport sizes ব্যবহার করতে পারেন। এর মাধ্যমে আপনি বিভিন্ন ডিভাইসের জন্য স্ক্রিনশট নেবেন।
Responsive Design স্ক্রিপ্ট উদাহরণ:
var webpage = require('webpage').create();
// Define multiple viewport sizes for different devices
var viewportSizes = [
{ width: 320, height: 480 }, // Mobile - Small
{ width: 768, height: 1024 }, // Tablet
{ width: 1280, height: 800 }, // Desktop
];
// Loop through the viewport sizes and take screenshots for each
viewportSizes.forEach(function(size) {
webpage.viewportSize = size;
webpage.open('https://example.com', function(status) {
if (status === "success") {
var fileName = 'screenshot_' + size.width + 'x' + size.height + '.png';
webpage.render(fileName);
console.log('Screenshot taken for ' + size.width + 'x' + size.height);
} else {
console.log('Failed to load the page for ' + size.width + 'x' + size.height);
}
});
});
phantom.exit();
Explanation:
- এখানে, আমরা
viewportSizesনামক একটি অ্যারে তৈরি করেছি যাতে বিভিন্ন ডিভাইসের স্ক্রীন সাইজ রয়েছে। forEachলুপ ব্যবহার করে প্রতিটি স্ক্রীন সাইজের জন্য পেজটি লোড করা হবে এবং স্ক্রিনশট নেওয়া হবে।- স্ক্রিনশটের নাম প্রতিটি স্ক্রীন সাইজের সাথে যুক্ত করা হবে, যেমন
screenshot_320x480.png,screenshot_768x1024.png, ইত্যাদি।
Step 3: স্ক্রিপ্ট চালানো
উপরের মতোই, স্ক্রিপ্টটি চালানোর জন্য কমান্ড লাইনে:
phantomjs responsive_screenshot_script.js
এই স্ক্রিপ্টটি নির্দিষ্ট ডিভাইস সাইজ অনুযায়ী স্ক্রিনশট নিবে এবং PNG ফাইল হিসেবে সেভ করবে।
PhantomJS এর মাধ্যমে Mobile View এবং Responsive Design স্ক্রিনশট নেওয়ার সুবিধা:
- Automation: PhantomJS একটি headless browser হওয়ায় স্ক্রিনশট নেওয়ার কাজটি স্বয়ংক্রিয়ভাবে করতে পারেন, যা manual testing এর তুলনায় অনেক দ্রুত হয়।
- Testing on Multiple Devices: একাধিক viewport size ব্যবহার করে একই ওয়েবসাইটের স্ক্রিনশট নিতে পারবেন এবং আপনার ডিজাইনটি বিভিন্ন ডিভাইসের উপর কেমন দেখাচ্ছে তা যাচাই করতে পারবেন।
- Integration: এটি CI/CD pipelines এ ইন্টিগ্রেট করা সম্ভব, যেখানে স্বয়ংক্রিয়ভাবে স্ক্রিনশট নেওয়া এবং পরীক্ষার ফলাফল জমা করা যাবে।
- Performance: GUI ছাড়া কাজ করার কারণে PhantomJS অনেক দ্রুত কাজ করে এবং পারফরম্যান্স খুবই ভালো।
PhantomJS এর মাধ্যমে আপনি Responsive Design এবং Mobile View এর স্ক্রিনশট নিতে পারেন, যা ওয়েব ডেভেলপমেন্টের সময় খুবই উপকারী হতে পারে। এই প্রক্রিয়া আপনাকে headless browser ব্যবহারের মাধ্যমে বিভিন্ন ডিভাইসে আপনার ওয়েবসাইটের ডিজাইন কেমন দেখাচ্ছে তা পরীক্ষা করতে সহায়তা করবে। PhantomJS এর মাধ্যমে আপনি স্বয়ংক্রিয়ভাবে স্ক্রিনশট নিতে পারবেন, যা ডিজাইন টেস্টিং এবং QA প্রক্রিয়াকে দ্রুত এবং দক্ষ করে তোলে।
Read more
