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: stackoverflow.com/questions/11917042/… — Daniel Figueroa
– Daniel Figueroa, Commented Sep 6, 2013 at 12:16
@DanielFigueroa Thanks for the link. Still i'm not able to find the error in my code. — Serjical Kafka
– Serjical Kafka, Commented Sep 6, 2013 at 12:22
actually i'm getting a portion rendered. But cropped from some other portion of the same page. — Serjical Kafka
– Serjical Kafka, Commented Sep 6, 2013 at 12:30

Daniel Figueroa · Accepted Answer · 2013-09-06 13:42:59Z

13

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

edited Sep 6, 2013 at 13:42

answered Sep 6, 2013 at 12:39

Daniel Figueroa

10.7k5 gold badges49 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Serjical Kafka Over a year ago

It is showing an error now. TypeError: 'null' is not an object <evaluating 'document.queryselector<".span7 demo">.getBountingClientRect'>

Serjical Kafka Over a year ago

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.

Daniel Figueroa Over a year ago

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.

Naveen Over a year ago

I reused the code and i was trying this on www.google.com trying to extract div lga. It wouldnt work. Any thoughts ?

Kurt Van den Branden · Accepted Answer · 2017-10-24 09:12:58Z

1

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

edited Oct 24, 2017 at 9:12

answered Sep 20, 2016 at 20:20

Kurt Van den Branden

13.2k10 gold badges83 silver badges92 bronze badges

Comments

Pfff · Accepted Answer · 2015-02-05 23:14:23Z

0

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

answered Feb 5, 2015 at 23:14

Pfff

1

Collectives™ on Stack Overflow

How to render an html element using phantomjs

3 Answers 3

EDIT

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

EDIT

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related