Skip to content

Latest commit

 

History

History
65 lines (37 loc) · 1.36 KB

README.md

File metadata and controls

65 lines (37 loc) · 1.36 KB
Raw

md-avatar

Generate material design avatar with canvas! 63348403-8385-4102-87fb-25e5bbedffe4

install

bower install md-avatar

usage

new mdAvatar(options); // It will return a canvas dom element.

new mdAvatar({
	size: 100,
	text: 'S'
}); // <canvas width="100" height="100">

new mdAvatar({
	size: 64,
	text: 'G'
}).toDataURL(); // data:image/png;base64,.......

options

  • target (default: null)

    The ID of target canvas, or you can pass a canvas dom. If this field not provide, it will return a new canvas element by document.createElement('canvas').

  • size (default: 32)

    The size of avatar(canvas).

  • text (default: ?)

    The text in avatar. You can pass a string in to this field, but it will only take the FIRST char.

  • textColor (default: white)

    The color of text.

  • textSize (default: this.size / 2)

    The size of text.

  • textAlign (default: center)

  • textBaseline (default: middle)

  • fontFamily (default: sans-serif)

  • bgColor (default: depend on this.text)

    The avatar's background color. By default, it contains color patterns(500) in Material Design Color. And the color's default value is depend on this.text(not random).

LICENSE

MIT