🌌 Imagegen as a Service (Node.js)

Imagegen (image generator) as a Service, built with Node.js, Docker, and DigitalOcean.

ℹ️ If you prefer Next.js + Serverless to Node.js + Docker, checkout this repository.

What is this?

This is a (REST) API service that generates dynamic images for different purposes, is especially useful to generate cover images for content distribution:

• Blogging & writing.

• Videos' thumbnails.

• Open-source repositories' social images.

• etc.

It's built with Node.js and configured for deployment as a Docker service to every supported cloud, e.g. DigitalOcean, AWS, GCP, Kubernetes, etc. To make it even easier, it is configured to deploy to DigitalOcean App Platform with a single click.

Example

The above image is a dynamic image generated by this service, copy and paste the URL below on your browser to see it yourself:

https://img.phuctm97.com/api/v2/%F0%9F%97%BE%20**Imagegen**%20as%20a%20Service?&icons=Node.js&icons=Docker&icons=DigitalOcean

How should you use it?

Feel free to test the API on my website at img.phuctm97.com but please don't use it directly on yours. Instead:

• Fork the repository.

• Update the Deploy to DigitalOcean button's URL.

• Click the button to deploy to DigitalOcean (you'll need an account).

• Make changes to fit your needs (see below, it's easy).

• Push and see your changes automatically updated on DigitalOcean 🎉.

ℹ️ You can always use any other platform that supports Docker deployment, please consider contributing to this project's documentation if you've done it successfully 🙏🏻.

API

V1

Generic, non-personalized, fewer features.

URL: GET /api/v1/[slug]

Query params:

text: string.(png|jpg)
theme: "light" | "dark"
md: boolean # Enable/disable basic Markdown syntax
fontSize: string
images: string[]
widths: string[]
heights: string[]

All query params are optional, reasonable defaults are used when necessary.

Example:

https://img.phuctm97.com/api/v1/Hello,%20World!?images=https://simpleicons.org/icons/node-dot-js.svg

V2

Personalized, more features.

URL: GET /api/v2/[slug]

Query params:

text: markdown.(png|jpg)
target: "og" | "devto"
theme: "light" | "dark"
icons: string[]
colors: string[]

• text supports basic Markdown syntax. Emojis are replaced with Twemoji variants.

• target defines format suitable for distribution to a specific channel, currently supports Open Graph (og) and DEV.to (devto) .

• icons are loaded from Simple Icons. Use names appearing on Simple Icons' website as API inputs. Not found icons are ignored.

• colors are valid CSS colors, or default to use Simple Icons' suggested colors, or invert to invert the default colors.

All query params are optional, reasonable defaults are used when necessary.

Example:

https://img.phuctm97.com/api/v2/%F0%9F%90%B3%20**Imagegen**%20as%20a%20Service?&icons=Node.js&icons=DigitalOcean

Project structure

The project uses Puppeteer to launch and capture screenshots from a headless Chrome. Responses are cached for 7 days to increase performance and reduce loads.

• server/v1: parse API v1 requests and generate static HTML.

  • Change parser.js to update query API.
  • Change template.js to customize output images.

• server/v2: parse API v2 requests and generate static HTML.

  • Change parser.js to update query API.
  • Change template.js to customize output images.

• images/avatar.jpg: author's avatar used in v2. Replace with yours.

• server/*.js: utils to process HTML and capture screenshots.

• index.js: Express.js API routes to receive requests.

• fonts: Fonts are loaded locally in server/*/template.js. Replace with your fonts (if necessary).

• Dockerfile: Preconfigured Docker image for deployment.

Recommended approach: copy index.js#api/v1 + server/v1 (or index.jsapi/v2 + server/v2) to v3, then make changes arcordingly. It won't accidentally crash your code this way.

Development

Requirements

• Node.js 12.

• Yarn 1.22+.

• Google Chrome.

• (Optionally) Docker.

Setup

Install dependencies:

yarn

Start development server:

yarn dev

See package.json for all pre-configured scripts.

Author

Made by (@phuctm97).

Thanks

Heavily inspired by Vercel's og-image.