内容简介：This module exposes a function that generates images (png, jpeg) from HTML. It uses puppeteer in headless mode to achieve it. Additionally, it embarksList of all available options:
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:
| 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(bitmap).toString('base64');
nodeHtmlToImage({
output: './image.png',
html: '<html><body><img src="{{imageSource}}" /></body></html>',
content: { imageSource: base64Image }
})
Related
- node-html-to-image-cli - CLI for this module
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
- 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
:memo:
License
Copyright © 2019 FRIN Yvonnick frin.yvonnick@gmail.com .
This project is Apache--2.0 licensed.
This README was generated with
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
