🧙 Mage

Magically creates wonderful images for you!

Placeholder

Generate custom placeholder images for your websites and templates on the fly.

Examples

Example Placeholder 1
Example Placeholder 2

How to use

TL;DR

https://mage.skayo.dev/placeholder/widthxheight/background-color/text-color.format?text

How to set image size

The image size is the only required option.
Just specify it after the placeholder endpoint (/placeholder or /ph) and you'll get a placeholder image:

https://mage.skayo.dev/placeholder/500

The height is optional. If no height is specified, your placeholder image will be a square.
So if you want to set the height, use the <width> x <height> format:

https://mage.skayo.dev/placeholder/500x250

How to set image background & text color

By default, text color is dark gray and background color is light gray.
Colors are represented as either a hex code (like #ff0000 or #f00) or a CSS color name (like red).
They are specified after the image size, with the first option being the background color and the second option being the text color.
Both are optional, so you can leave out the text color if you want.
For example, an image with red background and white text would be:

https://mage.skayo.dev/placeholder/500x250/red/white
OR
https://mage.skayo.dev/placeholder/500x250/f00/fff

How to set custom text

By default, the text on the image is just the image dimensions in pixels.
To specify custom text, use a query string at the very end of the URL. Everything after the ? will be used as the text:

https://mage.skayo.dev/placeholder/500x250/f05945/fff?This+is+some+custom+text

The text should be URL-encoded. So spaces are + or %20 and newlines are %0A.
For more information, see Percent-encoding.

How to set image format

By default, the image format is PNG.
To set an image format, add the file extension after any of the options:

https://mage.skayo.dev/placeholder/500x250/f05945/fff.png
https://mage.skayo.dev/placeholder/500x250/f05945.png/fff
https://mage.skayo.dev/placeholder/500x250.png/f05945/fff

Supported image formats are:


Identicon

Generate unique Identicons for your users.

"An Identicon is a visual representation of a hash value, usually of an username or IP address, that serves to identify a user of a computer system as a form of avatar while protecting the users' privacy."

Examples

Example Identicon 1
Example Identicon 2
Example Identicon 3
Example Identicon 4

How to use

TL;DR

https://mage.skayo.dev/identicon/size.format?seed

How to set image size

The image size is the only required option.
Just specify it after the identicon endpoint (/identicon or /id) and you'll get an identicon image:

https://mage.skayo.dev/identicon/500

How to set a seed

By default, the seed is just your IP address.
To provide a custom seed, use a query string at the very end of the URL.
Everything after the ? will be used as the seed:

https://mage.skayo.dev/identicon/500?Some+seed

The seed can be any value you want: A username, an IP address, an email, a timestamp, etc.
The generator uses the seed to randomly generate the image, so if you provide the same seed multiple times, it'll always produce the same image.
The seed should also be URL-encoded. So spaces are + or %20 and newlines are %0A.
For more information, see Percent-encoding.

How to set image format

By default, the image format is PNG.
To set the image format, add the file extension after the image size:

https://mage.skayo.dev/identicon/500.png

Supported image formats are:


QR Code

Generate QR codes to encode any kind of data into images.

Examples

Example QR Code 1
Example QR Code 2
Example QR Code 3

How to use

TL;DR

https://mage.skayo.dev/qrcode/size/background-color/foreground-color/margin/ecc/encoding.format?data

How to set image size

The image size is the first of the two required options.
Specify it after the QR code endpoint (/qrcode or /qr):

https://mage.skayo.dev/qrcode/500?some+data

How to set QR code data

The data itself is the second required option.
To set the data, use a query string at the very end of the URL.
Everything after the ? will be used as data and encoded in the QR code:

https://mage.skayo.dev/qrcode/500?some+data

The data should be URL-encoded. So spaces are + or %20 and newlines are %0A.
For more information, see Percent-encoding.

How to set background & foreground color

By default, background color is white and foreground (pixel) color is black.
Colors are represented as either a hex code (like #ff0000 or #f00) or a CSS color name (like red).
They are specified after the image size, with the first option being the background color and the second option being the foreground color.
Both are optional, so you can leave out the foreground color if you want.
For example, a QR code with red background and white foreground would be:

https://mage.skayo.dev/qrcode/500/red/white?some+data
OR
https://mage.skayo.dev/qrcode/500/f00/fff?some+data

How to set margin

The margin is the white border between the image boundaries and the QR code.
By default, the margin is 10 pixels.
To set the margin, specify it after the foreground color:

https://mage.skayo.dev/qrcode/500/fff/000/20?some+data

How to set error correction level (ECC)

The error correction determines the degree of data redundancy. The more data redundancy exists, the more data can be restored if a QR code is damaged (i.e. scratches on a QR code sticker or something like that).
By default, the error correction level is set to the lowest (L).
To set the error correction level, specify it after the margin:

https://mage.skayo.dev/qrcode/500/fff/000/10/H?some+data

Possible values are:

How to set encoding

The encoding specifies the charset to encode the data with, before being stored in the QR code. By default, UTF-8 is being used, to support a large set of characters. To set the encoding format of the data, specify it after the ECC:

https://mage.skayo.dev/qrcode/500/fff/000/10/L/ISO-8859-1?some+data

Possible encoding formats are:

How to set image format

By default, the image format is PNG.
To set an image format, add the file extension after any of the options:

https://mage.skayo.dev/qrcode/500/fff/000.png
https://mage.skayo.dev/qrcode/500/fff.png/000
https://mage.skayo.dev/qrcode/500.png/fff/000

Supported image formats are: