@tcortega/node-html-to-image
Advanced tools
A Node.js library that generates images from HTML
This module exposes a function that generates images (png, jpeg) from HTML. It uses puppeteer in headless mode to achieve it. Additionally, it embarks Handlebars to provide a way to add logic in your HTML.
npm install node-html-to-image
# or
yarn add node-html-to-image
Note: When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API.
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!'))
Types are included in the package. Enable the esModuleInterop compiler flag then change all references of require with import statements and you should be good to go:
import nodeHtmlToImage from 'node-html-to-image'
List of all available options:
| option | description | type | required |
|---|---|---|---|
| output | The ouput path for generated image | string | optional |
| html | The html used to generate image content | string | required |
| type | The type of the generated image | jpeg or png (default: png) | optional |
| quality | The quality of the generated image (only applicable to jpg) | number (default: 80) | optional |
| content | If provided html property is considered an handlebars template and use content value to fill it | object or Array | optional |
| waitUntil | Define when to consider markup succeded. Learn more. | string or Array (default: networkidle0) | optional |
| puppeteerArgs | The puppeteerArgs property let you pass down custom configuration to puppeteer. Learn more. | object | optional |
| beforeScreenshot | An async function that will execute just before screenshot is taken. Gives access to puppeteer page element. | Function | optional |
| transparent | The transparent property lets you generate images with transparent background (for png type). | boolean | optional |
| encoding | The encoding property of the image. Options are binary (default) or base64. | string | optional |
| selector | The selector property lets you target a specific element to perform the screenshot on. (default body) | string | optional |
node-html-to-image takes a screenshot of the body tag's content. If you want to set output image's resolution you need to set its dimension using CSS like in the following example.
const nodeHtmlToImage = require('node-html-to-image')
nodeHtmlToImage({
output: './image.png',
html: `<html>
<head>
<style>
body {
width: 2480px;
height: 3508px;
}
</style>
</head>
<body>Hello world!</body>
</html>
`
})
.then(() => console.log('The image was created successfully!'))
Handlerbars is a templating language. It generates HTML from a template and an input object. In the following example we provide a template to node-html-to-image and a content object to fill the template.
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!'))
Handlebars provides a lot of expressions to handle common use cases like conditions or loops.
If you want to display an image which is stored remotely do it as usual. In case your image is stored locally I recommend having your image in base64. Then you need to pass it to the template with the content property. Here is an example:
const nodeHtmlToImage = require('node-html-to-image')
const fs = require('fs');
const image = fs.readFileSync('./image.jpg');
const base64Image = new Buffer.from(image).toString('base64');
const dataURI = 'data:image/jpeg;base64,' + base64Image
nodeHtmlToImage({
output: './image.png',
html: '<html><body><img src="{{imageSource}}" /></body></html>',
content: { imageSource: dataURI }
})
If you want to apply fonts, you need to synchronize your parts loading of your website. One way doing it is to convert your font to base64 and add it to your style in your html. For example:
const font2base64 = require('node-font2base64')
const _data = font2base64.encodeToDataUrlSync('../my/awesome/font.ttf')
const html = `
<html>
<head>
<style>
@font-face {
font-family: 'testFont';
src: url(${_data}) format('woff2'); // don't forget the format!
}
</style>
</head>
...
If you don't want to save the image to disk and would rather do something with it immediately, you can use the returned value instead! The example below shows how you can generate an image and send it back to a client via using express.
const express = require('express');
const router = express.Router();
const nodeHtmlToImage = require('node-html-to-image');
router.get(`/api/tweet/render`, async function(req, res) {
const image = await nodeHtmlToImage({
html: '<html><body><div>Check out what I just did! #cool</div></body></html>'
});
res.writeHead(200, { 'Content-Type': 'image/png' });
res.end(image, 'binary');
});
If you want to generate multiple images in one call you must provide an array to the content property.
To save on the disk you must provide the output property on each object in the content property.
nodeHtmlToImage({
html: '<html><body>Hello {{name}}!</body></html>',
content: [{ name: 'Pierre', output: './image1.png' }, { name: 'Paul', output: './image2.png' }, { name: 'Jacques', output: './image3.png' }]
})
.then(() => console.log('The images were created successfully!'))
If you don't want to save the images to disk you can use the returned value instead. It returns an array of Buffer objects.
const images = await nodeHtmlToImage({
html: '<html><body>Hello {{name}}!</body></html>',
content: [{ name: 'Pierre' }, { name: 'Paul' }, { name: 'Jacques' }]
})
yarn test
👤 FRIN Yvonnick frin.yvonnick@gmail.com
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!
Copyright © 2019 FRIN Yvonnick frin.yvonnick@gmail.com.
This project is Apache--2.0 licensed.
This README was generated with ❤️ by readme-md-generator
FAQs
A Node.js library that generates images from HTML
We found that @tcortega/node-html-to-image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.