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

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
transparent	The transparent property let you generate images with transparent background (for png type).	boolean	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.

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:

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 }
})

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.

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(imgBinary, 'binary');
});

node-html-to-image-cli - CLI for this module

Run tests

yarn test

Author

👤 FRIN Yvonnick [email protected]

🤝 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

This README was generated with ❤️ by readme-md-generator

draftedus / node-html-to-image Goto Github PK

node-html-to-image's Introduction

Welcome to node-html-to-image 🌄

🏠 Homepage

Description

Install

Usage

Options

Setting output image resolution

Example with Handlebars

Dealing with images

Using the buffer instead of saving to disk

Related

Run tests

Author

🤝 Contributing

Show your support

📝 License

node-html-to-image's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org