🦁 Yvonnick FRIN

Posted on Dec 18, 2019 • Originally published at yvonnickfrin.dev

Generate images from HTML in Node.js

#javascript #node #showdev

As developers, we don't have great skills with image manipulation softwares, but we still need it. In my case I had to generate Twitter cards for social media and flyers for the meetup I co-organize. An important point for use is automation. So I wanted a solution that let me make a template and generates a lot of images without extra work.

That is why I created node-html-to-image. A Node.js module that generates images from HTML.

Here is the simplest example, you provide an output path and a HTML string. That's all!



const nodeHtmlToImage = require('node-html-to-image')

nodeHtmlToImage({
  output: './image.png',
  html: '<html><body>Hello world!</body></html>'
})
  .then(() => console.log('The image was created successfully!'))

I talked about automation earlier. It comes with a templating engine, Handlebars. It enables creating multiple images using the same template.

In the following example, we changed world by a placeholder and inject its value with the content option.



const nodeHtmlToImage = require('node-html-to-image')

nodeHtmlToImage({
  output: './image.png',
  html: '<html><body>Hello {{name}}!</body></html>',
  content: { name: 'you' }
})
  .then(() => console.log('The image was created successfully!'))

You want to generate images from HTML without writing a line of code? No problem, I also made a cli that use node-html-to-image underneath called node-html-to-image-cli.



npx node-html-to-image-cli index.html image.png

Generated image:

Feel free check out the GitHub repositories if you are interested:

Want to support ? Don't forget to leave a ⭐️

Feedback or ideas are appreciated 🙏 Please tweet me if you have questions @YvonnickFrin!

Latest comments (19)

tejesh002 • Dec 13 '23

This Package output only 800X600 dimension, but expecting dimension is greater then this.

Kaushan • Mar 23 '21

That’s really great ! I used to make it via screenshot inside headless browsers. This solution is much more elegant

majiyd • Jun 9 '20

Wow, Thank you for this great work!

I have a question though, Does it work with react Native? Thank you.

Nathaniel-kw Cheung • Apr 17 '20

Super cool stuff

Is there any way to use custom font? I got a HTML like this but the output image is not using the font specified (it's good to show in browser)

<br>
body {<br>
width: 1000px;<br>
height: 500px;<br>
}</p>
<div class="highlight"><pre class="highlight plaintext"><code> @font-face {
font-family: JuneBug;
src: url('JUNEBUG.TTF');
}

h1 {
    font-family: JuneBug
}

</style>
</code></pre></div>
<p></head></p>

<p><body>Hello world!<br>
<h1>Hey, June</h1><br>
</body></p>

🦁 Yvonnick FRIN • Apr 20 '20

Hi Nathaniel,

TTF format is made for Safari, Android and iOS. The image is generated in a chromium browser. So you can only use WOFF format.

Wei Lun • Feb 26 '20 • Edited

This won't work on Docker, need to install anything other that npm install?

Sebastián Rojas Ricaurte • Apr 18 '20

You have to follow this for Docker github.com/puppeteer/puppeteer/blo... (tehere is specifict instructiosn for alpine also) and send this in puppeteerArgs when you call nodeHtmlToImage:

puppeteerArgs: {
headless: true,
args: [
"--no-sandbox",
"--remote-debugging-address=0.0.0.0",
"--remote-debugging-port=9222",
],
}