letter-icon-generator

EXPERIMENTAL IMPLEMENTATION

Generates a svg or png image. A single letter is on center of the image.

Usage

First, run a docker container. It provides an api to generate svg and png data.

$ docker run -dp 1337:1337 mmktomato/letter-icon-generator:latest

# or you can build your own docker image. See below.

Second, call the api to generate image.

// Endpoint for SVG
const uri = 'http://localhost:1337/api/svg?l=m';

// Endpoint for PNG
// const uri = 'http://localhost:1337/api/png?l=m';

const res = await fetch(uri, {
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        size: 200,
        fontFamily: 'helvetica',
        fontSize: '86pt',
        background: '#cccccc',
        foreground: '#000000'
    })
});
console.log(await res.text());

Endpoint

method	endpoint	result
POST	/api/svg	svg data
POST	/api/png	png data (Base64 encoded)

Parameters

parameter		default value	type	explanation
l	query		string	A letter to show in generated image.
size	body	200	number	Size of image (diameter).
fontFamily	body	helvetica	string	Font family of the letter.
fontSize	body	86pt	string	Font size of the letter.
background	body	#cccccc	string	Background color of the image.
foreground	body	#000000	string	Color of the letter.

See src/public/demo.js for example.

Demo application

A demo application is available in the container.

$ docker run -dp 1337:1337 mmktomato/letter-icon-generator:latest

# Open `http://localhost:1337/demo.html`.

Build demo application

You can build your own demo application. You can install any fonts as you like in your container. This means you can use them to generate images.

# Open `Dockerfile` and edit it as you like.

$ docker build -t my/letter-icon-generator .
$ docker run -dp 1337:1337 my/letter-icon-generator:latest

# Open `http://localhost:1337/demo.html`.

Note

Generating PNG images may take a lot of time fot the first time.

Development

You need Node.js (>= 8).

Develop with demo application. You can choose two ways about Chrome/Chromium.

a. If you want to use Chrome/Chromium installed in your machine

Run PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install
Run cp .env.template .env
Open .env and edit PUPPETEER line. Change Chrome/Chromium path to correct one.
Run npm start
Open http://localhost:1337/demo.html

b. If you want to use Chrome/Chromium installed in node_modules

Run npm install
Run cp .env.template .env
Open .env and edit PUPPETEER line. Follow its comment.
Run npm start
Open http://localhost:1337/demo.html