Creating screenshots of HTML elements using PhantomJS

phantom.js

var page = require('webpage').create();
page.open('/url', function () {

	var items = ['selector1', 'selector2', 'selector3'];
	var items_length = items.length;

	for (var i = 0; i < items_length; i++) {
		var clipRect = page.evaluate(function (s) {
			var cr = document.querySelector(s).getBoundingClientRect();
			return cr;
		}, '.'+items[i]);
		
		page.clipRect = {
			top:    clipRect.top,
			left:   clipRect.left,
			width:  clipRect.width,
			height: clipRect.height
		};
		
	    page.render('../'+items[i]+'.png');
	    
	    if (i < items_length) phantom.exit();
	}
});