Puppeteer Instaquote
Instaquote / meme image generator using Puppeteer.
Install
yarn add puppeteer-instaquote
Usage
The first input is an excel spreadsheet containing two columns, one for Author and one for Quote.
The second input is a list of background images with some optional styles specific to each background image. So for a given background image, you could specify that you want to use a specific font, text color, padding (to identify the space within the output image that you want the text to fit within). It supports any CSS styles and any font from Google Fonts.
It performs auto-sizing of the content within the background image's specified padding area, so short quotes will use larger font sizes and longer quotes will automatically use smaller font sizes. This ensures that no matter what input is given, the output text will always "fit" within the desired bounds assuming those bounds have been configured correctly via the opts.styles.padding
.
See demo.js for example usage.
Examples
Demo
This repo comes with a demo containing 10 quotes rendered for each of the 9 example background images (so 90 images in total for this demo). This examples use the following Google Fonts: Caveat, Sacramento, Dancing Script, Great Vibes, Rochester, and Calligraffitti.
See media/output for the full list of example output images.
To run the demo, clone this repo locally, then run yarn
to install dependencies, then node demo.js
to generate the output images.
API
renderInstaquote
Renders the given meme via puppeteer to an output
file.
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.
The generated html page is returned as a string for debugging and batch rendering purposes.
Type: function (opts): Promise
opts
object Configuration optionsopts.output
string Path of image file to store resultopts.quote
string Main text (or html) of the content to render.opts.author
string Main text (or html) of the sub-header (content author).opts.background
string? Background image either as a local file path or as a URL (defaults to a transparent background).opts.width
number Optional width of output image (optional, default1080
)opts.height
number Optional height of output image (optional, default1080
)opts.style
object Top-level CSS styles to apply to the top-level container div. (optional, default{}
)opts.quoteStyle
object Quote / main content CSS styles to apply to the main content div. (optional, default{}
)opts.authorStyle
object Author CSS styles to apply to the author's div. (optional, default{}
)
License
MIT © Travis Fischer
Support my OSS work by following me on twitter