Material Style Text Avatar Generator – Material Avatar

Preview:

Description:

Material Avatar is a pure vanilla JavaScript library for generating Google Material Design style text avatars with background colors using HTML5 canvas and randomColor.js. Great for generating nice, clean name badges from user names.

Basic usage:

Load the necessary material-avatar.js and randomColor.js at the end of the document.

<script src="randomColor.js"></script>
<script src="material-avatar.js"></script>

Generate a basic square avatar from plain text wrapped in the container ‘avatar’.

var avatar = new Avatar(document.getElementById('avatar'));

Change the shape to ‘circle’.

MaterialAvatar(document.getElementsByClassName('circle'), {shape: 'circle'});

All default configuration options.

MaterialAvatar(document.getElementsByClassName('example'), {
// "circle" or "square"
shape: "square",
// A hex string for a background color (i.e. '#f12a27'). 
// If not set, one will be chosen at random, or from a default colorPalette (which can be overridden)
backgroundColor: '',
// A hex string for the text color (i.e. '#fff'). 
// If not set, an accessable friendly color will be chosen based on the background color (either '#222' or '#fff')
textColor: '',
// An array of color hexes that can will be chosen from randomly as a fallback. 
// Defaults can be found in the material-avatar.js file.
colorPalette: [],
// An overriding size for font. This can either be a number, measured in px, or a function. If its a function, it will be sent two arguments, the height of the canvas, and the initials length, which can be used to return a calculated font size.
fontSize: 14,
// font family
fontFamily: "Arial",
// A string of characters used as the initials for the avatar.
initials: '',
// In addition to being able to use the data-name attribute, or the innerHtml of an element, you can also pass a name in the options, which will be broken down into the initial.
name: ''
});

Setup the randomColor options as this. You can find all the options here.

MaterialAvatar(document.getElementsByClassName('color'), {randomColor: {hue: 'orange'}});

Changelog:

08/01/2018

• Fix rendering when text starts with numbers