jQuery LetterPic plugin

LetterPic converts usernames into canvas based avatar pictures.
View it on github: jQuery LetterPic github page.

Basic usage

Define html-element with user name in title="John Doe" attribute. Then call .letterpic() on proper selector or image with your jquery selector.

Avatar caching by user name

Jon Snow
Avatar caching by user name.
By default user's color is cached by user's name (Jon Snow in this example).
Jon Snow
Avatar caching by user id
This img has the same attribute title="Jon Snow". So it's looks same too.
Jon Snow
Avatar caching
To avoid collision situations, when two different users can have same name,
you should add data-userid=YourInternalUserId attribute to element.
In this way user's colors will be cached by this id, not by name.
For example, this user has same name, but different data-userid="1" value.

Broken image replacement

You could use letterpic to replace images with broken sources.
Don't forget to place user name to img title attribute.

Jon Snow
Broken image replacement
There are wrong image src="brokenImageUrl.jpg" attribute.
LetterPic replace it with letter avatar after loading error event.

Color, gradient or image background

Gradients

By default letterpic uses gradients as background. It has 19 predefined gradient color scheme,
based on google material colors. You can change this scheme, just pass gradients to options on init.

Default gradient backgrounds:

                        $(".letterpic").letterpic();
Custom gradient backgrounds:
You should pass array of arrays with gradient colors ([ ["#color1", "$color2", ...], [...], ...]). 

                        $(".letterpic").letterpic({
                            gradients: [
                                ["#fff", "#333", "#000", "#777"],
                                ["#aaafff", "#aaa777"],
                                ["#dddfff", "#ddd333", "#ddd777"],
                            ]
                        });

Colors

If you want to use solid color as background, you show pass fill: 'color' parameter as option on init. By default letterpic has predefined color scheme with 19 colors, based on google material styles.
You can change this scheme, just pass array of colors: ["#color1", "#color2", ...] to options on init.

Default color backgrounds:

                        $(".letterpic").letterpic({ fill: 'color' });
Custom color scheme:

                        $(".letterpic").letterpic({
                            fill: 'color',
                            colors: [ "#111", "#222", "#333", "#444", "#555" ]
                        });

Images

Another possibility is to use image with fill: 'image' parameter as option on init. By default letterpic has few example background pattens from colourlovers.com.
You can change this scheme, just pass array of image: ["imageUrl1", "imageUrl2", ...] to options on init.
Try to define custom fontColor: "#color" and imageOverlayColor: "#rgbaColor" to increase the contrast of final image.

Default image backgrounds:

                        $(".letterpic").letterpic({ fill: 'image' });
Custom images (images taken from freepik.com):

                        $(".letterpic").letterpic({
                            fill: 'image',
                            images: [
                                    "https://image.freepik.com/free-vector/floral-background-with-watercolor-leaves_1085-886.jpg",
                                    "https://image.freepik.com/free-vector/watercolor-feathers-background_23-2147607455.jpg",
                                    "https://image.freepik.com/free-vector/octopus-pattern-design_1235-151.jpg"
                                ],
                            fontColor: "#CCC",
                            imageOverlayColor: "rgba(0, 0, 0, .5)"
                        });

Options

Option Default value Possible values Description
fill 'gradient' 'color', 'gradient' or 'image' Background drawing style.
colors Array of 19 predifined colors. Array of colors: ["#453445", "#546343", ...] Color scheme for color background. It works only if 'fill': 'color' passed to options.
gradients Array of 19 predifined gradients. Array of array of colors:
[["#111", "#222", ...],
[["#444", "#555", "#000", ...],
[["#453445", "#546343"],
...]
 Color scheme for gradient background. It works only if no 'fill' or 'fill': 'gradient' passed to options.
images Array of 8 predifined images. Array of image urls: ["http://url1", "/images/img2", ...] Image array for image background. It works only if 'fill': 'image' passed to options.
imageOverlayColor Transparent. RGBa color with transparency, e.g. 'rgba(0,0,0,.5))' Overlay color for 'fill': 'image'. Use it to increase the contrast of avatar.
font 'Arial' Font family name, e.g. 'Arial', 'Verdana', 'Tahomf' Font family for avatar text.
fontColor '#fff' String with color, e.g. '#fff', '#000' and etc. Font color for avatar text.
fontSize .45 Relative size of font, any decimal in range from 0 to 1 Relative size of font for avatar text