puppeteer-render-text
Robust text renderer using headless chrome.
![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)
This module is also available as a CLI.
Why?
ImageMagick is the traditional unix tool to programatically render text, and while it works very well for simple use cases, trying to use it to render rich text or html is very difficult. Pango is another option that's been around for ages, but both suffer from archaic syntax and minimal rich text support.
Puppeteer, on the other hand, allows for robust, headless chrome screenshots with best-in-class support for all modern html / text / font features.
This module makes it easy to use headless chrome to render text + html to images.
Features
Install
npm install puppeteer-render-text
Usage
import { renderText } from 'puppeteer-render-text'
await renderText({
text: 'hello world',
output: 'out0.png',
style: {
fontFamily: 'segue ui',
fontSize: 64
}
})
await renderText({
text: 'headless chrome is awesome',
output: 'out1.png',
loadGoogleFont: true,
width: 400,
style: {
fontFamily: 'Roboto',
fontSize: 32,
padding: 16
}
})
await renderText({
text: 'headless <b>chrome</b> is <span style="color: red: font-style: italic;">awesome</span>',
output: 'out1.png',
loadGoogleFont: true,
width: 100,
style: {
fontFamily: 'Roboto',
overflowWrap: 'break-word'
}
})
Note that all CSS styles are specified via the JS CSS syntax, which uses camelCase instead of hyphens. This is, for instance, what React uses for its inline styles.
API
Renders the given text / html via puppeteer.
Asynchronously returns the generated html page as a string for debugging purposes.
If you want to load multiple google fonts, juse specify their font-families in opts.style.fontFamily
separated by commas as you normally would for CSS fonts.
Type: function (opts): Promise
opts
object Configuration options
opts.text
string HTML content to renderopts.output
string Path of image file to output resultopts.width
number? Optional max width for word-wrapopts.height
number? Optional max height to clip overflowopts.loadFontFamily
string? Optional font family to load with fontfaceobserveropts.loadGoogleFont
boolean Whether or not to load and wait for opts.style.fontFamily
as one or more google fonts (optional, default false
)opts.style
object JS CSS styles to apply to the text's container div (optional, default {}
)opts.inject
object Optionally injects arbitrary string content into the head, style, or body elements. (optional, default {}
)
opts.inject.head
string? Optionally injected into the document opts.inject.style
string? Optionally injected into a tag within the document <head>
opts.inject.body
string? Optionally injected into the document
Related
License
MIT © Travis Fischer
If you found this project interesting, please consider sponsoring me or following me on twitter ![twitter](https://storage.googleapis.com/saasify-assets/twitter-logo.svg)