Skip to content
A Node.js module that generates images from HTML
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src ♻️ Use Tesseract.js to simplify installation Dec 23, 2019
.gitignore ♻️ Use Tesseract.js to simplify installation Dec 23, 2019
CHANGELOG.md 🔖 Release v1.1.0 Dec 6, 2019
LICENSE Initial commit Dec 5, 2019
README.md 📝 Add a section about output image resolution Dec 18, 2019
example.js ♻️ Use Tesseract.js to simplify installation Dec 23, 2019
jest.config.js
package.json
yarn.lock ♻️ Use Tesseract.js to simplify installation Dec 23, 2019

README.md

Welcome to node-html-to-image 🌄

Version Documentation License: Apache--2.0 Twitter: yvonnickfrin

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

npm install node-html-to-image
# or
yarn add node-html-to-image

Usage

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!'))

Options

List of all available options:

option description type required
ouput The ouput path for generated image string required
html The html used to generate image content string required
type The type of the generated image jpeg or png (default: png) optional
content If provided html property is considered an handlebars template and use content value to fill it object optional
waitUntil Define when to consider markup succeded. Learn more. string or Array optional
puppeteerArgs The puppeteerArgs property let you pass down custom configuration to puppeteer. Learn more. object 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.

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

nodeHtmlToImage({
  output: './image.png',
  html: `<html>
    <head>
      <style>
        body {
          width: 2480px;
          height: 3508px;
        }
      <style>
      </style>
    </head>
    <body>Hello world!</body>
  </html>
  `
})
  .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.

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.

Related

Run tests

You need to install tesseract on your computer before launching tests. Here is the procedure for Mac users:

brew install tesseract
brew install tesseract-lang

Launch test:

yarn test

Author

👤 FRIN Yvonnick frin.yvonnick@gmail.com

🤝 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

You can’t perform that action at this time.