DEV Community

loading...
Cover image for node-html-to-image v1.2 is out 🎉

node-html-to-image v1.2 is out 🎉

🦁 Yvonnick FRIN
Senior frontend engineer at @Sterblue. I'm a @NantesJS meetup co-organizer on my spare time.
・2 min read

Sometime ago, I wrote a small module called node-html-to-image. It generates images from HTML in Node.js. For more information, here is an article that explains how to use it. This week, it has been featured in NodeWeekly 🎉

This week, I also released version 1.2. Let's see what's new in node-html-to-image.

✨ Transparency support

This feature was asked by jordan314. It wasn't possible to have a transparent background for png images. Here is an example to achieve it with the new transparent option:

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

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

📝 Improve documentation

Users frequently asked me two questions about node-html-to-image usage:

  • How to use locally stored images?
  • How to set my image resolution?

I added two sections directly in the README that answer these questions (image resolution and dealing with images).

I hope it will help 🙏

♻️ Simplify test setup

I use tesseract to test the module works fine. It was tricky to install the engine on your computer in order to run tests. I moved to tesseract.js which is a Javascript port of this OCR engine. Running yarn installation command is now enough to setup the project before running tests.

💻 The CLI has been released too!

node-html-to-image has its own CLI. I think it is a good way to quickly give a try to the module.

node-html-to-image-cli demo

What's new in node-html-to-image-cli v1.1:

Add an option to provide content

It is now possible to use handlebars with the CLI too. Here is an example:

npx node-html-to-image-cli ./index.html ./image.png --content ./content.json
Enter fullscreen mode Exit fullscreen mode

index.html:


<!DOCTYPE html>
<html>
  <body>
    <h1>Hello {{you}}</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

content.json:

{ 
  "you": "world"
}
Enter fullscreen mode Exit fullscreen mode

Thanks to Julien Tanguy 🙏

Add an option to support transparency

I also added an option transparent to enable support of transparency in the CLI too:

npx node-html-to-image-cli --type png --transparent ./index.html ./image.png
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (7)

Collapse
emersongarrido profile image
Emerson Garrido

Every time I go to upload the application in production on the linux server ubuntu I have to set the args configuration: ["--no-sandbox"] in puppeter, would I be able to fix this in your lib?

I believe that several people are going through the same problem.

Collapse
sm0ke profile image
Sm0ke

This is nice ..

Collapse
yvonnickfrin profile image
🦁 Yvonnick FRIN Author

Glad you like it!

Collapse
developervishaldhawan profile image
Vishal Dhawan

Nice...
Does it support SVG as well.? I mean if there is any SVG element in the html. Will it converts the same into image?

Collapse
yvonnickfrin profile image
🦁 Yvonnick FRIN Author

I think you can use an svg tag it should works fine 😄

Collapse
uifort1 profile image
uifort

Is it possible to use it to generate images from html elements, based on a xpath selector?

Collapse
yvonnickfrin profile image
🦁 Yvonnick FRIN Author

I didn't try. Maybe you could test it and tell me if it works?