Render HTML to an image

Question

Is there a way to render html to image like PNG? I know that it is possible with canvas but I would like to render standard html element like div for example.

Answer 1

Install phantomjs

$ npm install phantomjs

Create a file github.js with following code

var page = require('webpage').create();
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 1024, height: 768 };
page.open('http://github.com/', function() {
    page.render('github.png');
    phantom.exit();
});

Pass the file as argument to phantomjs

$ phantomjs github.js