Skip to content

Latest commit

 

History

History
109 lines (76 loc) · 3.64 KB

README.md

File metadata and controls

109 lines (76 loc) · 3.64 KB
Raw

Mock Image Server

Docker Image Version (latest semver) Docker Pulls

Mock-image-server is a simple image generation server for building website mock-ups. Serve images generated with specified size, color, text.

Latest version is 1.1.1

CHANGELOG.md for detail

Run

Local environment

Just run npm start.

npm start
open http://localhost:3000/300x200.jpg

Docker

You could also use the published docker image. see mitonize/mock-image-server.

Start the Docker container by binding port 3000.

docker run -d -p 3000:3000 mitonize/mock-image-server
open http://localhost:3000/300x200.jpg

Request specification

Path

Foundamental parameters are specified as path component. Path format is as below.

Basic one is simply only width, height and file format like 'png', 'jpg' and so on. The other one clearly specifies the color.

  • /{width}x{height}.{extension} (e.g. /300x200.jpg )
  • /{color hex}/{width}x{height}.{extension} (e.g. /99241c/300x200.png )
path component description
{color hex} Color hex code, No '#' needed.
highest priority color regardless of palette, key.
{width} Image width. range is 1 to 2000.
{height} Image height. range is 1 to 2000.
{extension} File type as 'png', 'jpg', 'webp', 'avif'

Parameters

Each parameter is optional.

parameter description default value
text Text rendered in the image. '%0a' is for newline. generated as "{width}x{height}"
key Color decision key. Same key is as same color. treat text parameter value as key.
palette Specify color palette definition. Palette is defined in palette.yml. "neutral" (built in palette)
from Enable to respond existing images by specifying folder name. (none)

HTTP Header

Above path and parameter can be specified at the request header X-MockImageServer-Path alternatively. If this header is set, actual path and parameter are ignored.

curl -H X-MockImageServer-Path:/300x200.jpg?text=BBBB&key=KEY1 http://localhost:3000/any/path/to/image.jpg

example

http://localhost:3000/300x200.jpg?text=AAAA

These two images are same color since each key is as same. Color is determined automatically from current color palette.

http://localhost:3000/300x200.jpg?text=AAAA&key=KEY1
http://localhost:3000/300x200.jpg?text=BBBB&key=KEY1

To specify color palette, use palette parameter. These two images below are different color in spite of the same key since palette is not as same.

The palette are defined in YAML file. see palette.yml

http://localhost:3000/300x200.jpg?text=AAAA&key=KEY1&palette=pink
http://localhost:3000/300x200.jpg?text=BBBB&key=KEY1&palette=blue
docker run -d -p 3000:3000 -v ./LOCAL-IMAGE-DIR:/app/img mitonize/mock-image-server

# Enable to respond existing images by specifying folder name as 'from' parameter 
open http://localhost:3000/300x360.jpg?from=img

# Also subfolder could be use
open http://localhost:3000/300x360.jpg?from=img/item

Customizing

You can override palette definition by mounting /app/palette.yml as docker volume.

docker run -d -p 3000:3000 \
  -v ./LOCAL-IMAGE-DIR:/app/img \
  -v ./MY-PALETTE.yml:/app/palette.yml \
  mitonize/mock-image-server