img-nodejs

KO | EN

gitlite — search

#javascript #react #ai #typescript #rust #linux #docker #macos #awesome #vue #pytorch #security #openai #open-source

(★ 16)

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

img-nodejs Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Generated image][cover image]

# 🌌 Imagegen as a Service (Node.js)

[![Checks status][checks status]][checks url]
[![Dependabot status][dependabot status]][dependabot url]
[![Code style][code style]][code style url]
[![License info][license info]][license url]

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

[![Deploy to DO][do button]][do deploy url]

> ℹ️ If you prefer Next.js + Serverless to Node.js + Docker, [checkout this
> repository][next-based repo].

## 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][do deploy url].

### Example

The [above image][cover 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][fork repo].

- 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**:

```yml
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**:

```yml
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.js**`api/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:

```bash
yarn
```

Start development server:

```bash
yarn dev
```

See [package.json] for all pre-configured scripts.

## Author

Made by ([@phuctm97]).

## Thanks

Heavily inspired by Vercel's [og-image].

[cover image]:
  https://img.phuctm97.com/api/v2/%F0%9F%97%BE%20**Imagegen**%20as%20a%20Service?&icons=Node.js&icons=Docker&icons=DigitalOcean
[checks status]:
  https://img.shields.io/github/checks-status/phuctm97/img-nodejs/master?logo=Github
[dependabot status]:
  https://img.shields.io/badge/dependabot-enabled-025e8c?logo=Dependabot
[license info]: https://img.shields.io/github/license/phuctm97/img
[code style]:
  https://img.shields.io/badge/code%20style-prettier-F7B93E?logo=Prettier
[do button]:
  https://mp-assets1.sfo2.digitaloceanspaces.com/deploy-to-do/do-btn-blue.svg
[checks url]:
  https://github.com/phuctm97/img-nodejs/actions?query=workflow%3APR+branch%3Amaster
[dependabot url]:
  https://github.com/phuctm97/img/blob/master/.github/dependabot.yml
[code style url]: /.prettierrc.json
[license url]: /LICENSE
[do deploy url]:
  https://cloud.digitalocean.com/apps/new?repo=https://github.com/phuctm97/img-nodejs/tree/master

[node.js]: https://nodejs.org
[docker]: https://docker.com
[fork repo]: https://github.com/phuctm97/img-nodejs/fork
[next-based repo]: https://github.com/phuctm97/img
[@phuctm97]: https://twitter.com/phuctm97
[package.json]: /package.json
[digitalocean]: https://www.digitalocean.com
[simple icons]: https://simpleicons.org
[twemoji]: https://twemoji.twitter.com
[puppeteer]: https://github.com/puppeteer/puppeteer
[og-image]: https://github.com/vercel/og-image

img-nodejs

img-nodejs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

img-nodejs

img-nodejs Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README