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.