How to render part of a page with PhantomJS?

javascript phantomjs
Dany Joumaa picture Dany Joumaa · Aug 11, 2012 · Viewed 19.8k times · Source

I would like to render individual HTML elements into PNGs using Phantom.JS. Does anyone know if this is possible? Also, how would I use Phantom.js to render a page that the user is already looking at?

Answer

jasonlfunk picture jasonlfunk · Aug 11, 2012

To only render part of a page you need to set the clipRect attribute for the page and then render it.

var clipRect = document.querySelector(selector).getBoundingClientRect();
page.clipRect = {
    top:    clipRect.top,
    left:   clipRect.left,
    width:  clipRect.width,
    height: clipRect.height
};
page.render('capture.png');

I don't understand the second part of your question. Phantom.js is headless meaning that there is no actual display that a user is looking at.

Related questions

phantomjs not waiting for "full" page load

I'm using PhantomJS v1.4.1 to load some web pages. I don't have access to their server-side, I just getting links pointing to them. I'm using obsolete version of Phantom because I need to support Adobe Flash on that web pages. …

Read More
How to submit a form using PhantomJS

I'm trying to use phantomJS (what an awesome tool btw!) to submit a form for a page that I have login credentials for, and then output the content of the destination page to stdout. I'm able to access the form …

Read More
PhantomJS; click an element

How do I click an element in PhantomJS? page.evaluate(function() { document.getElementById('idButtonSpan').click(); }); This gives me an error "undefined is not a function..." If I instead return document.getElementById('idButtonSpan'); and then print it, then it prints [object …

Read More