综合开发

node-html-to-image: Generate Images from HTML

微信扫一扫,分享到朋友圈

node-html-to-image: Generate Images from HTML

Welcome to node-html-to-image :sunrise_over_mountains:

A Node.js library that generates images from HTML

:house:
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:

optiondescriptiontyperequired
ouputThe ouput path for generated imagestringrequired
htmlThe html used to generate image contentstringrequired
typeThe type of the generated imagejpeg or png (default: png)optional
contentIf provided html property is considered an handlebars template and use content value to fill itobjectoptional
waitUntil Define when to consider markup succeded. Learn more
.
string or Arrayoptional
puppeteerArgs The puppeteerArgs property let you pass down custom configuration to puppeteer. Learn more
.
objectoptional
transparentThe transparent property let you generate images with transparent background (for png type).booleanoptional

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(bitmap).toString('base64');
nodeHtmlToImage({
output: './image.png',
html: '<html><body><img src="https://www.tuicool.com/articles/jiyU73z/{{imageSource}}" /></body></html>',
content: { imageSource: base64Image }
})

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

:bust_in_silhouette:

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 :star:️
if this project helped you!

:memo:
License

Copyright © 2019 FRIN Yvonnick
frin.yvonnick@gmail.com
.

This project is Apache–2.0
licensed.

This README was generated with :heart:
by readme-md-generator

麦肯锡:开启全速数字化营销打造银行新的增长工厂

上一篇

Generating your own custom icon font made easy

下一篇

你也可能喜欢

评论已经被关闭。

插入图片

热门栏目

node-html-to-image: Generate Images from HTML

长按储存图像,分享给朋友