Generate web page screenshot via script

For us web developers, screenshots is the best way to point out some layout issues, demonstrate a feature or anything that you want to show visually. We commonly use our "native" way of getting screenshots by using the "Print Screen" button in our computer or any other other tools that you might have in your PC.

There is a problem though with that approach, let's say you have 10-15 websites that you want to have a screenshot?
Ok, fine, it's ok for you to manually go through each website, open up your browser and hit the print screen button.

But how about 50 websites? with hundreds of pages on it?

Well, we got a situation here, for whatever purpose it may serve, sooner or later, you might be needing some automated tool that requires no human intervention to generate a screenshot of your webpage(s). This comes handy when let's say a client was complaining that something gets misaligned for the past several days. For this, you could setup an automated screenshot scheduled once everyday, so at least you could check it back the past dates of when the misalignment happened.

But then how can we do that? Simple, use a "headless browser". A headless browser is like your normal browser with it's user interface stripped off. Means, it has no physical menu, window or anything. It is basically the "layout engine" of the browser, it is a program inside the browser that actually reads the html/css markups then draw appropriate images on the browser's user's interface, that is what you perceives as the "layout" of the webpage.

PhantomJS is one of the most popular headless browser, it is available in almost all platforms ( Windows, Linux etc.) and can be run in command line. To use PhantomJS, you need to know how to program in JavaScript, since it is the programming language that phantomjs executables will need.

The script below for example will open a web page, generate a filename based on the current date, then save the screenshot into the disk.

var page = require('webpage').create();
var system = require('system');

var cur_date = new Date();
var filename = cur_date.getFullYear() + '-' + (cur_date.getMonth()+1) + '-' + cur_date.getDate() +'_'+ cur_date.getHours() +cur_date.getMinutes();

var url = system.args[1];
page.open(url, function () {
	page.render(filename+'.png');  
	system.stdout.writeLine('done : '+ url);	
	phantom.exit(0);	
});

To execute this, you will need to save the file in a .js file, then
(assuming that the path to phantomjs executable is in the your path/current directory)

phantomjs screencap.js

The advantage of this is, since it is just an ordinary executable file/library, you could invoke this either via shell script which you could then schedule in your cron to run at specific interval. It could be also be conveniently placed in a .bat file (if you are in Windows) and when you want to generate a set of screenshot of several websites, you could just do so by double-clicking the .bat file which runs the phantomjs script.

There are tons of other uses phantomjs can be used for, keep exploring!

---

• ← Previous Post
• Next Post →