Instaquote / meme image generator using Puppeteer.
yarn add puppeteer-instaquote
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
See demo.js for example usage.
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.
Renders the given meme via puppeteer to an
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.
function (opts): Promise
optsobject Configuration options
opts.outputstring Path of image file to store result
opts.quotestring Main text (or html) of the content to render.
opts.authorstring Main text (or html) of the sub-header (content author).
opts.backgroundstring? Background image either as a local file path or as a URL (defaults to a transparent background).
opts.widthnumber Optional width of output image (optional, default
opts.heightnumber Optional height of output image (optional, default
opts.styleobject Top-level CSS styles to apply to the top-level container div. (optional, default
opts.quoteStyleobject Quote / main content CSS styles to apply to the main content div. (optional, default
opts.authorStyleobject Author CSS styles to apply to the author's div. (optional, default
MIT © Travis Fischer