PhantomJS - clipRect Property

The clipRect is an object with values top, left, width and height and used to take the image capture of the webpage, when used by the render() method. If the clipRect is not defined, it will take the screenshot of the full webpage when the render method is called.

Syntax

Its syntax is as follows −

var page = require('webpage').create(); 
page.clipRect = { 
   top: 14, 
   left: 3, 
   width: 400, 
   height: 300 
};

Example

Take a look at the following example to understand the use of clipRect property.

var wpage = require('webpage').create(); 
wpage.viewportSize = { 
   width: 1024, 
   height: 768 
}; 
wpage.clipRect = { 
   top: 0, 
   left: 0, 
   width: 500, 
   height: 500 
}; 
//the clipRect is the portion of the page you are taking a screenshot 
wpage.open('http://www.google.com/', function() { 
   wpage.render('e.png'); 
   phantom.exit(); 
});

Here, we are taking the screenshot of the site google.com. It will generate the following output −