利用canvas生成Material design风格的头像:md-avatar

jopen 9年前

利用canvas生成Material design风格的头像:md-avatar63348403-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 bydocument.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 onthis.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 onthis.text(not random).

项目主页:http://www.open-open.com/lib/view/home/1438953702692