Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hellsan631/material-avatar
Simple material design avatars using canvas
https://github.com/hellsan631/material-avatar
Last synced: 3 months ago
JSON representation
Simple material design avatars using canvas
- Host: GitHub
- URL: https://github.com/hellsan631/material-avatar
- Owner: hellsan631
- Created: 2015-09-02T21:10:29.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-10-10T22:45:54.000Z (over 2 years ago)
- Last Synced: 2024-10-11T01:13:24.723Z (4 months ago)
- Language: JavaScript
- Homepage: http://hellsan631.github.io/material-avatar/
- Size: 63.5 KB
- Stars: 39
- Watchers: 3
- Forks: 11
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Simple material design avatars using canvas
### Enhanced by [BrowserStack](http://browserstack.com/)
[![Code Climate](https://codeclimate.com/github/hellsan631/material-avatar/badges/gpa.svg)](https://codeclimate.com/github/hellsan631/material-avatar)
[![License](http://img.shields.io/badge/License-MIT-blue.svg)](http://opensource.org/licenses/MIT)
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](https://github.com/davidmerfield/randomColor), but has a fall-back just incase you don't include it.
> __Now Supports jQuery!__
### Useage
1. Install using __npm__, __bower__, or __download__.
```bash
npm install --save material-avatar
bower install --save material-avatar
```And include your scripts,
```html
```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_
```html
Paul Gilbert
```3. Call __MaterialAvatar__ in somewhere on your page.
```html
MaterialAvatar(document.getElementsByClass('default-profile-photo'), options);//or use jQuery
$('.default-profile-photo').materialAvatar(options);
```4. Profit.
### Options
> __EffectName:__ "default" _(type)_
> Description1. __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](https://github.com/davidmerfield/randomColor)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](https://github.com/hellsan631/material-avatar/tree/master/sample) or [the live website](http://hellsan631.github.io/material-avatar/) 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