How to render an html element using phantomjs

Question

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);
    }
});

It looks lite it, a quick search gives you this SO thread: http://stackoverflow.com/questions/11917042/how-to-render-part-of-a-page-with-phantomjs — Daniel Figueroa, Sep 06 '13 at 12:16
@DanielFigueroa Thanks for the link. Still i'm not able to find the error in my code. — Serjical Kafka, Sep 06 '13 at 12:22
actually i'm getting a portion rendered. But cropped from some other portion of the same page. — Serjical Kafka, Sep 06 '13 at 12:30

Daniel Figueroa · Accepted Answer · 2013-09-06T13:42:59.527

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);
    }
});

It is showing an error now. TypeError: 'null' is not an object .getBountingClientRect'> — Serjical Kafka, Sep 06 '13 at 12:51
Using var clipRect = page.evaluate(function () { return document.querySelector(".span7 demo").getBoundingClientRect(); }); i'm getting the png output. But I'm not getting the div i want. — Serjical Kafka, Sep 06 '13 at 12:53
Yeah, my answer before was just crap, I'm sorry for that. But I've provided you with an example that works for me now. — Daniel Figueroa, Sep 06 '13 at 13:44
I reused the code and i was trying this on www.google.com trying to extract div lga. It wouldnt work. Any thoughts ? — Naveen, Aug 28 '14 at 00:57

Kurt Van den Branden · Answer 2 · 2017-10-24T09:12:58.690

You can easily capture an element with an ID too. Just replace getElementsByClassName("classname")[0] by document.getElementById('divID'). A full working example would be:

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

page.open("https://www.sejlar.com/maps.html", function (status) {
    if (status !== 'success') {
        console.log('Page not found');
    } 
    else {
        var p = page.evaluate(function () {
            return document.getElementById('map').getBoundingClientRect();
        });

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

        page.render('screenshot.png');
        phantom.exit(); 
    }
});

score 0 · Answer 3 · answered Feb 05 '15 at 23:14

I believe what you should do here is surround your return-object with JSON.stringify.

return JSON.stringify(document.getElementsByClassName("span7 demo")[0].getBoundingClientRect();

or getting the contents of the div

return JSON.stringify(document.getElementsByClassName("span7 demo")[0].innerHTML);

How to render an html element using phantomjs

3 Answers3

EDIT

Linked