Gathering detailed insights and metrics for node-html-to-image
Gathering detailed insights and metrics for node-html-to-image
Installations
npm install node-html-to-imageDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Score
66
Supply Chain
96.3
Quality
74.4
Maintenance
100
Vulnerability
98.6
License
Releases
Unable to fetch releases
Download Statistics
Total Downloads
4,188,036
Last Day
1,549
Last Week
26,875
Last Month
108,086
Last Year
1,231,350
Bundle Size
181.21 kB
Minified
57.36 kB
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
5.0.0
Package Id
node-html-to-image@5.0.0
Unpacked Size
22.79 MB
Size
10.55 MB
File Count
43
Published on
Sep 03, 2024
Total Downloads
Cumulative downloads
Total Downloads
4,188,036
Last Day
45.2%
1,549
Compared to previous day
Last Week
-4.1%
26,875
Compared to previous week
Last Month
11.2%
108,086
Compared to previous month
Last Year
19.9%
1,231,350
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Welcome to node-html-to-image 🌄
A Node.js library that generates images from HTML
🏠 Homepage
Description
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.
Install
1npm install node-html-to-image 2# or 3yarn 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.
Usage
- Simple example
- TypeScript Support
- Options
- Setting output image resolution
- Example with Handlebars
- Using Handlebars helpers
- Dealing with images
- Using the buffer instead of saving to disk
- Generating multiple images
- Using different puppeteer libraries
Simple example
1const nodeHtmlToImage = require('node-html-to-image') 2 3nodeHtmlToImage({ 4 output: './image.png', 5 html: '<html><body>Hello world!</body></html>' 6}) 7 .then(() => console.log('The image was created successfully!'))
TypeScript support
The library is written in Typescript so it is available out of the box:
1import nodeHtmlToImage from 'node-html-to-image'
Options
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 | optional |
| puppeteer | The puppeteer property let you use a different puppeteer library (like puppeteer-core or puppeteer-extra). | object (default: puppeteer) | 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 |
| handlebarsHelpers | The handlebarsHelpers property lets add custom logic to the templates using Handlebars sub-expressions. Learn more. | object | optional |
| timeout | Timeout for a puppeteer-cluster (in ms). Defaults to 30000 (30 seconds). | number | optional |
Setting output image resolution
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.
1const nodeHtmlToImage = require('node-html-to-image') 2 3nodeHtmlToImage({ 4 output: './image.png', 5 html: `<html> 6 <head> 7 <style> 8 body { 9 width: 2480px; 10 height: 3508px; 11 } 12 </style> 13 </head> 14 <body>Hello world!</body> 15 </html> 16 ` 17}) 18 .then(() => console.log('The image was created successfully!'))
Example with Handlebars
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.
1const nodeHtmlToImage = require('node-html-to-image') 2 3nodeHtmlToImage({ 4 output: './image.png', 5 html: '<html><body>Hello {{name}}!</body></html>', 6 content: { name: 'you' } 7}) 8 .then(() => console.log('The image was created successfully!'))
Handlebars provides a lot of expressions to handle common use cases like conditions or loops.
Using Handlebars helpers
Handlerbars sub-expressions can be used to add custom logic to the templates. To do this, you must pass a handlebarsHelpers object with functions defined within.
For example, if you had a variable and wanted to do some conditional rendering depending on its value, you could do this:
1const nodeHtmlToImage = require('node-html-to-image') 2 3nodeHtmlToImage({ 4 output: './image.png', 5 content: { myVar: 'foo' }, 6 handlebarsHelpers: { 7 equals: (a, b) => a === b, 8 }, 9 html: ` 10 <html> 11 <body> 12 {{#if (equals myVar 'foo')}}<div>Foo</div>{{/if}} 13 {{#if (equals myVar 'bar')}}<div>Bar</div>{{/if}} 14 </body> 15 </html>` 16 17})
Dealing with images
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:
1const nodeHtmlToImage = require('node-html-to-image')
2const fs = require('fs');
3
4const image = fs.readFileSync('./image.jpg');
5const base64Image = new Buffer.from(image).toString('base64');
6const dataURI = 'data:image/jpeg;base64,' + base64Image
7
8nodeHtmlToImage({
9 output: './image.png',
10 html: '<html><body><img src="{{{imageSource}}}" /></body></html>',
11 content: { imageSource: dataURI }
12})Dealing with fonts
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:
1const font2base64 = require('node-font2base64') 2 3const _data = font2base64.encodeToDataUrlSync('../my/awesome/font.ttf') 4 5const html = ` 6<html> 7 <head> 8 <style> 9 @font-face { 10 font-family: 'testFont'; 11 src: url("{{{_data}}}") format('woff2'); // don't forget the format! 12 } 13 </style> 14 </head> 15...
Using the buffer instead of saving to disk
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.
1const express = require('express'); 2const router = express.Router(); 3const nodeHtmlToImage = require('node-html-to-image'); 4 5router.get(`/api/tweet/render`, async function(req, res) { 6 const image = await nodeHtmlToImage({ 7 html: '<html><body><div>Check out what I just did! #cool</div></body></html>' 8 }); 9 res.writeHead(200, { 'Content-Type': 'image/png' }); 10 res.end(image, 'binary'); 11});
Generating multiple images
If you want to generate multiple images in one call you must provide an array to the content property.
Saving to disk
To save on the disk you must provide the output property on each object in the content property.
1nodeHtmlToImage({ 2 html: '<html><body>Hello {{name}}!</body></html>', 3 content: [{ name: 'Pierre', output: './image1.png' }, { name: 'Paul', output: './image2.png' }, { name: 'Jacques', output: './image3.png' }] 4}) 5 .then(() => console.log('The images were created successfully!'))
Using buffers
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.
1const images = await nodeHtmlToImage({ 2 html: '<html><body>Hello {{name}}!</body></html>', 3 content: [{ name: 'Pierre' }, { name: 'Paul' }, { name: 'Jacques' }] 4})
Using different puppeteer libraries
If you want to use different puppeteer library you must provide the puppeteer property.
1const chrome = require('chrome-aws-lambda');
2const nodeHtmlToImage = require('node-html-to-image')
3const puppeteerCore = require('puppeteer-core');
4
5const image = await nodeHtmlToImage({
6 html: '<html><body><div>Hello</div></body></html>',
7 puppeteer: puppeteerCore,
8 puppeteerArgs: {
9 args: chromium.args,
10 executablePath: await chrome.executablePath,
11 }
12})Related
Libraries
- node-html-to-image-cli - CLI for this module
Articles
Run tests
1yarn test
Author
👤 FRIN Yvonnick frin.yvonnick@gmail.com
- Website: https://yvonnickfrin.dev
- Twitter: @yvonnickfrin
- Github: @frinyvonnick
🤝 Contributing
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Show your support
Give a ⭐️ if this project helped you!
📝 License
Copyright © 2019 FRIN Yvonnick frin.yvonnick@gmail.com.
This project is Apache--2.0 licensed.
This README was generated with ❤️ by readme-md-generator
No vulnerabilities found.
No security vulnerabilities found.