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

Answer 1

The solution below works for me.

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

But I notice that this on works only if we are rendering an image not a pdf. To wokaround this for pdf, try this

page.evaluate(function (element){
    $(element).appendTo('body');
    $('body > :not(' + element + ')').hide(); 
   }, element);       
  });

window.setTimeout(function(){
    page.render("page.pdf");
  },1000);

This links may help: How to hide all elements except one using jquery?

https://github.com/ariya/phantomjs/issues/10465