Serjical Kafka Serjical Kafka - 2 months ago 25
Javascript Question

How to render an html element using phantomjs

I want to save the image inside the div specified in the code. But using the code below i"m getting some other portion rendered. Is this the correct way to do it? I'm just a beginner in phantomjs. So Please help.

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

page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {

var clipRect = page.evaluate(function () {
return document.querySelector(".span7 demo").getBoundingClientRect(); });
page.clipRect = {
top: clipRect.top,
left: clipRect.left,
width: clipRect.width,
height: clipRect.height
};



window.setTimeout(function () {
page.render('capture.png');
phantom.exit();
}, 200);
}
});

Answer

This might be completely wrong but the link that I provided in my comment does it like this:

Change

var clipRect = page.evaluate(function () { 
return document.querySelector(".span7 demo").getBoundingClientRect(); });

to:

var clipRect = document.querySelector(".span7 demo").getBoundingClientRect(); });

EDIT

Okay so I wanted to figure this one out and here's the code that works for me. I'm not familiar with the phantomjs api to use querySelector so I ended up using getElementsByClassName which is pretty much the same.

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

page.open("http://n1k0.github.io/casperjs/#phantom_Casper_captureSelector", function    (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
    } else {
        window.setTimeout(function () {
            //Heres the actual difference from your code...
            var bb = page.evaluate(function () { 
                return document.getElementsByClassName("span7 demo")[0].getBoundingClientRect(); 
            });

            page.clipRect = {
                top:    bb.top,
                left:   bb.left,
                width:  bb.width,
                height: bb.height
            };

            page.render('capture.png');
            phantom.exit();
        }, 200);
    }
});