Phantom JS - clipRect - Javascript Help

Question

i'm using phantom js to screen shot a page

http://code.google.com/p/phantomjs/wiki/QuickStart#Rendering

it has a feature called clipRect

http://code.google.com/p/phantomjs/wiki/Interface#clipRect_(object )

can someone show me how i would modify the following code to us clipRect so i only get a partial screenshot and not the whole thing?

if (phantom.state.length === 0) {
if (phantom.args.length !== 2) {
    console.log('Usage: rasterize.js URL filename');
    phantom.exit();
} else {
    var address = phantom.args[0];
    phantom.state = 'rasterize';
    phantom.viewportSize = { width: 600, height: 600 };
    phantom.open(address);
}
} else {
    var output = phantom.args[1];
    phantom.sleep(200);
    phantom.render(output);
    phantom.exit();
}    

Answer 1

If you are trying to get a screenshot of a particular element, you could get the necessary information for clipRect from getBoundingClientRect as per the bottom of this article :

page.clipRect = page.evaluate(function() {
    return document.getElementById(THE_ELEMENT_YOU_WANT).getBoundingClientRect(); 
});

Answer 2

From the fine manual :

clipRect (object)

This property defines the rectangular area of the web page to be rasterized when render() is invoked. If no clipping rectangle is set, render() will process the entire web page.

Example: phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }

So try setting clipRect right before you call render :

var output = phantom.args[1];
phantom.sleep(200);
phantom.clipRect = { top: 14, left: 3, width: 400, height: 300 }
phantom.render(output);
phantom.exit();

You'd have to figure out where the upper left corner ( top and left ) is and how big ( width and height ) you want the clipping rectangle to be.

You can probably set the clipRect any time before render() is called but start with that and see what happens.

Answer 3

What was happening is i was using brew and it was installing v 1.0.0 where clipRect and almost every other function wasn't supported as v 1.0.0 is the oldest version.

If you follow these instructions: http://code.google.com/p/phantomjs/wiki/BuildInstructions#Mac_OS_X

then right click on the complied file and click show/view contents (on mac) then copy the executable bin/phantomjs.app/Contents/MacOS/phantomjs to some directory in your PATH.

Feel free to post on here i'm monitoring this and i can help if needed.