Simple material design avatars using canvas
Material-Avatar is non-opinionated and only has a few small features. It was built to solve a larger problem. How can I generate a good looking default avatar for a user?.
I got asked this question once, and there are a lot of other more complex implimentations out there, using bits and bobs to calculate a pixelated image, or grab sets of images from places, or use other web services. I like the way google approached the problem, creating a simple image with initials text.
Material-Avatar uses HTML5 Canvas to fill an element with a random(ized) background color, which uses this great module to find nice random colors, but has a fall-back just incase you don't include it.
Now Supports jQuery!
Install using npm, bower, or download.
npm install --save material-avatar bower install --save material-avatar
And include your scripts,
Create a nice div and fill it with a name, or use the attribute data-name. Note, material-avatar defaults to using the size provided by the style of the element on the page
<div class="default-profile-photo" style="height:200px; width:200px;"> Paul Gilbert </div>
Call MaterialAvatar in somewhere on your page.
<script> MaterialAvatar(document.getElementsByClass('default-profile-photo'), options); //or use jQuery $('.default-profile-photo').materialAvatar(options); </script>
EffectName: "default" (type)
shape "square" (string)
Can either be "circle" or "square", and will take that shape (more shapes in future updates!)
Settings for using the randomColor library
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)
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')
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.
fontSize (number or function)
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.
fontFamily "Arial" (string)
The chosen font family for generating the canvas initials font.
A string of characters used as the initials for the avatar.
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.
If you'd like to develop this little module a bit further, I use a nice gulp build process.
Get a localhost live-reload web-server running to develop the module
npm install gulp serve
Before you push your changes, make sure to run the gulp build script