Simple material design avatars using canvas

Enhanced by BrowserStack

1.33kb gziped!

====

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!

Useage

1. 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>

2. 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>

3. Call MaterialAvatar in somewhere on your page.

   <script>
     MaterialAvatar(document.getElementsByClass('default-profile-photo'), options);
   
     //or use jQuery
   
     $('.default-profile-photo').materialAvatar(options);
   </script>

4. Profit.

Options

EffectName: "default" (type)
Description

1. shape "square" (string)
   Can either be "circle" or "square", and will take that shape (more shapes in future updates!)

2. randomColor (object)
   Settings for using the randomColor library

3. 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)

4. 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')

5. 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.

6. 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.

7. fontFamily "Arial" (string)
   The chosen font family for generating the canvas initials font.

8. initials (string)
   A string of characters used as the initials for the avatar.

9. 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.

Development

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

License

MIT