Web page Capture and save to image using phantomjs

Question

i was searching google to get any js lib which can capture the image of any website or url. i came to know that phantomjs library can do it. here i got a small code which capture and convert the github home page to png image

if anyone familiar with phantomjs then please tell me what is the meaning of this line

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

here i can give any name instead of webpage ?

if i need to capture the portion of any webpage then how can i do it with the help of this library. anyone can guide me.

var page = require('webpage').create();
page.open('http://github.com/', function () {
    page.render('github.png');
    phantom.exit();
});

https://github.com/ariya/phantomjs/wiki

thanks

Answer 1

Here is a simple phantomjs script for grabbing an image:

var page = require('webpage').create(),
system = require('system'),
address, output, size;


address = "http://google.com";
output = "your_image.png";
page.viewportSize = { width: 900, height: 600 };

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            page.render(output);
            console.log('done');
            phantom.exit();
        }, 10000);
    }
})

Where..

'address' is your url string.

'output' is your filename string.

Also 'width' & 'height' are the dimensions of what area of the site to capture (comment this out if you want the whole page)

To run this from the command line save the above as 'script_name.js and fire off phantom making the js file the first argument.

Hope this helps :)

Answer 2

The line you ask about:

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

As far as I can tell, that line does 3 things: It adds a module require('webpage'), then creates a WebPage Object in PhantomJS .create(), and then assigns that Object to var = page

The name "webpage" tells it which module to add.

http://phantomjs.org/api/webpage/

I too need a way to use page.render() to capture just one section of a web page, but I don't see an easy way to do this. It would be nice to select a page element by ID and just render out that element based at whatever size it is. They should really add that for the next version of PhantomJS.

For now, my only workaround is to add an anchor tag to my URL http://example.com/page.html#element to make the page scroll to the element that I want, and then set a width and height that gets close to the size I need.

I recently discovered that I can manipulate the page somewhat before rendering, so I want to try to use this technique to hide all of the other elements except the one I want to capture. I have not tried this yet, but maybe I will have some success. See this page and look at how they use querySelector(): https://github.com/ariya/phantomjs/blob/master/examples/technews.js