how to screenshot a div using phantomJS

Question

Hi does anyone here can help me to screenshot my div using phantomJS? How can i Screenshot my #dropzone then append it on the same page?

Please help.

Answer 1

There are two ways you can partially render a webpage.

1) Make an extra page with just the div, screenshot it using render, and use the result on your actual page.

2) Use the clipRect functionality (as described here):

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

Answer 2

you can use node-webshot to do so, take a look at options then the captureSelector option.