Simple material design avatars using canvas
Enhanced by BrowserStack
====
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,
<script src="vendor/material-avatar/material-avatar.min.js"></script>
-
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>
-
Profit.
EffectName: "default" (type)
Description
-
Shape "square" (string)
Can either be "circle" or "square", and will take that shape (more shapes in future updates!) -
randomColor (object)
Settings for using the randomColor library -
backgroundColor (string)
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) -
textColor (string)
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') -
colorPalette (array)
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. -
initials (string)
A string of characters used as the initials for the avatar. -
name (string)
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.
see sample or the live website for some examples.
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
gulp build
MIT