PhantomJS renders the entire page depending on the size of the page or how it was supposed to be rendered in a browser. Different sites render differently. For example, if we capture a Wikipedia page in a normal browser, it will render something similar to the following screenshot:

The browser loads everything, but we can only see the viewable area in the browser, and we must scroll down to see everything else. In PhantomJS, it renders everything in one image. If we use our script and capture the screenshot of the preceding URL, it will give us an image with a dimension size of 777 pixels wide and 71,366 pixels long.

Having these gigantic images may cause some problems for viewing. PhantomJS allows setting the dimension size of what we have to capture. We can use the clipRect property of the WebPage object.

Let us say we want to limit the size of the rectangle to 800 pixels in width and 800 pixels in height. We also need to define the coordinate the clipping will start at; let's say top = 0 and left = 0. So, before we capture, we set the clipRect property to these values.

var system = require('system'),
var url = system.args[1];
var saveas = system.args[2];
var page = require('webpage').create();

page.open(url, function(status) {
  if ( status === "success" ) {
    console.log('Saving screenshot as ' + saveas);
    page.clipRect = { top: 0, left: 0, width: 800, height: 200 };
    page.render('screenshot.' + saveas);
    phantom.exit(0);
  }
});

We added the settings for the clipRect property; then we called the render function. This script when used to capture our Wikipedia page will give the following output: