How to render part of a page with PhantomJS?

Question

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 1

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.

Answer 2

Working example.

var page = require('webpage').create();  page.open('http://google.com', function() {   // being the actual size of the headless browser   page.viewportSize = { width: 1440, height: 900 };    var clipRect = page.evaluate(function(){     return document.querySelector('#hplogo').getBoundingClientRect();   });    page.clipRect = {     top:    clipRect.top,     left:   clipRect.left,     width:  clipRect.width,     height: clipRect.height   };    page.render('google.png');   phantom.exit(); });