transitive-bullshit / puppeteer-instaquote

Use Puppeteer to create snazzy Instagram-like quote images and memes

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 options
  • opts.output string Path of image file to store result
  • opts.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, default 1080)
  • opts.height number Optional height of output image (optional, default 1080)
  • 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