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?

CertainPerformance · Accepted Answer · 2020-12-21 18:08:20Z

29

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.

edited Dec 21, 2020 at 18:08

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

answered Jul 26, 2019 at 10:37

rudresh solanki

1,01510 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Over a year ago

This one is excellent and well maintained and has support for latest web standards!

gnuns · Accepted Answer · 2017-06-27 14:23:32Z

7

You can easily do it on frontend using html2canvas. On backend you can write the html on a file and access using a file URI (i.e: file:///home/user/path/to/your/file.html), it should work fine with chrome headless-browser and Nightmare (screenshot feature). Another option is to setup a simple HTTP server and access the url.

edited Jun 27, 2017 at 14:23

answered Jun 26, 2017 at 21:41

gnuns

6266 silver badges12 bronze badges

4 Comments

niryo Over a year ago

yea I thought about the option of using http server but it seems a bit strange...if no one will suggest a simpler solution ill accept yours because im starting to think there is no simpler solution, tnx

gnuns Over a year ago

you can just write the html file and use a file URI instead (i.e: file:///home/user/path/to/your/file.html), it should work fine with chrome headless:

niryo Over a year ago

oh right, i didn't thought about the file uri thing. sounds good, thanks!

std4453 Over a year ago

If you're already using headless chrome, why don't you simply take screenshots fron it?

Collectives™ on Stack Overflow

How to convert HTML to image in Node.js

2 Answers 2

1 Comment

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related