How to convert HTML to image in Node.js

Question

I need to convert an HTML template into an image, on a Node server. The server will receive the HTML as a string. I tried PhantomJS (using a library called Webshot), but it doesn't work well with flex box and modern CSS. I tried to use Chrome headless-browser but it doesn't seem to have an API for parsing html, only URL.

What is the currently best way to convert a piece of HTML into image?

Is there a way to use headless Chrome in a template mode instead of URL mode? I mean, instead of doing something like

chrome.goTo('http://test.com')

I need something like:

chrome.evaluate('<div>hello world</div>');

Another option, suggested here in the comments to this post, is to save the template in a file on the server and then serve it locally and do something like:

chrome.goTo('http://localhost/saved_template');

But this option sounds a bit awkward. Is there any other, more straightforward solution?

Answer 1

You can use a library called Puppeteer. Sample code snippet :

 const browser = await puppeteer.launch();
 const page = await browser.newPage();
 await page.setViewport({
     width: 960,
     height: 760,
     deviceScaleFactor: 1,
 });            
 await page.setContent(imgHTML);
 await page.screenshot({path: example.png});
 await browser.close();

This will save a screenshot of the HTML in the root directory.