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!'))
📝 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.
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
index.html:
<!DOCTYPE html>
<html>
<body>
<h1>Hello {{you}}</h1>
</body>
</html>
content.json:
{
"you": "world"
}
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
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!
Top comments (8)
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.
Use config like mine one:
nodeHtmlToImage({
output: "test.png",
html: "<html><body>Hello world!</body></html>",
puppeteerArgs: {
headless: true,
executablePath: '/usr/bin/google-chrome-stable',
ignoreDefaultArgs: ['--disable-extensions'],
args: [ '--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-accelerated-2d-canvas', '--no-first-run', '--no-zygote', ],
ignoreCache: true
}
})
.then(() => console.log('The image was created successfully!'))
This is nice ..
Glad you like it!
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?
I think you can use an svg tag it should works fine 😄
Is it possible to use it to generate images from html elements, based on a xpath selector?
I didn't try. Maybe you could test it and tell me if it works?