Simple material design avatars using canvas
Enhanced by BrowserStack1.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!
- 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;">
- Call MaterialAvatar in somewhere on your page.
//or use jQuery
EffectName: "default" (type)
- shape "square" (string)
- randomColor (object)
- backgroundColor (string)
- textColor (string)
- colorPalette (array)
- fontSize (number or function)
- fontFamily "Arial" (string)
- initials (string)
- name (string)