Render HTML to an image

Question

I would like to know if there is any manner or way to render an html to an image like a PNG? I am aware that this is possible with canvas but however, I would want to render the standard html element such as Div. Could anyone help me with this?

Answer 1

To answer your question, there are a lot of options available to render the standard html element such as using an API which includes ApiFlash, EcoPDF and the HTML to Image API. The advantage of this is to execute Javascript, close to perfect rendering, scale is handled by the APIs, precise timing and finally, the ability to offer a free plan. The disadvantage is that it is not free if decided to be used a lot. Another option is to use any one of the available libraries such as the dom-to-image and imgkit for python based on the wkhtmltoimage, python-webkit2png. The advantage of this option is that the conversion is very swift for most times. The disadvantages however are that the rendering is poor, does not execute javascript, is complicated to scale, could be tedious to install and finally does not support the recent web features such as Box Sizing and Media Queries. A third option or possibility is that using PhantomJs could help you with your doubt. For PhantomJs the following line of code captures the Google homepage, waits  for a bit, and then captures it to an image.

var page = require('webpage').create();

page.open('http://www.google.com', function() {

    setTimeout(function() {

        page.render('google.png');

        phantom.exit();

    }, 200);

});

The advantage of this is that it executes Javascript and works very quickly. The con is that it has poor rendering, does not support for the recent web features, is complicated to scale and is not easy to enable it to work if there are images to be loaded.