Avatars是一款可以动态生成用户头像js插件。Avatars可以在浏览器或node.js环境中,动态生成各种漂亮的、基于svg的用户头像。
使用方法
npm安装:
$ npm install @dicebear/avatars --save
然后选择以下的头像类型进行安装。
# male
$ npm install @dicebear/avatars-male-sprites --save
# female
$ npm install @dicebear/avatars-female-sprites --save
# identicon
$ npm install @dicebear/avatars-identicon-sprites --save
# initials
$ npm install @dicebear/avatars-initials-sprites --save
# bottts
$ npm install @dicebear/avatars-bottts-sprites --save
# gridy
$ npm install @dicebear/avatars-gridy-sprites --save
# avataaars
$ npm install @dicebear/avatars-avataaars-sprites --save
# jdenticon
$ npm install @dicebear/avatars-jdenticon-sprites --save
使用
import Avatars from '@dicebear/avatars';
import SpriteCollection from '@dicebear/avatars-male-sprites';
let avatars = new Avatars(SpriteCollection);
let svg = avatars.create('custom-seed');
例如,要创建一个男生头像:
let options = {};
let avatars = new Avatars(sprites(options));
let svg = avatars.create('custom-seed');
create()中的custom-seed是一个随机任意的字符串,随着字符串的不同,生成的头像也不相同。
参数
male-sprites 和 female-sprites 的配置参数:
let options = {
mood: ['happy', 'sad', 'surprised']
};
![]()
identicon-sprites 的配置参数:
let options = {
// Distance to the edge of the image
padding: 0,
// Background color
background: #FFF
};
![]()
bottts-sprites 的配置参数:
let options = {
// Possible values: amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
colors: [],
// Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
primaryColorLevel: 600,
// Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
secondaryColorLevel: 400,
// in percent
colorful: 100,
mouthChance: 100,
sidesChance: 100,
textureChance: 50,
topChange: 100,
};
![]()
avataaars-sprites 的配置参数:
let options = {
// transparent, circle
style: 'transparent'
// include or exclude passed options.
mode: 'include',
// Possible values: longHair, shortHair, eyepatch, hat, hijab, turban
top: [],
// in percent
topChance: 100,
// Possible values: black, blue, gray, heather, pastel, pink, red, white
hatColor: [],
// Possible values: auburn, black, blonde, brown, pastel, platinum, red, gray
hairColor: [],
// Possible values: kurt, prescription01, prescription02, round, sunglasses, wayfarers
accessories: [],
// in percent
accessoriesChance: 10,
// Possible values: medium, light, magestic, fancy, magnum
facialHair: null,
// in percent
facialHairChance: 10,
// Possible values: auburn, black, blonde, brown, platinum, red
facialHairColor: [],
// Possible values: blazer, sweater, shirt, hoodie, overall
clothes: [],
// Possible values: black, blue, gray, heather, pastel, pink, red, white
clothesColor: [],
// Possible values: close, cry, default, dizzy, roll, happy, hearts, side, squint, surprised, wink, winkWacky
eyes: [],
// Possible values: angry, default, flat, raised, sad, unibrow, up
eyebrow: [],
// Possible values: concerned, default, disbelief, eating, grimace, sad, scream, serious, smile, tongue, twinkle, vomit
mouth: [],
Possible values: tanned, yellow, pale, light, brown, darkBrown, black
skin: []
};
![]()
jdenticon-sprites 的配置参数:
let options = {
// an array of numbers between 0 and 360
hue: [],
// Distance to the edge of the image
padding: 0,
// an array of numbers between 0 and 1
colorLightness: [],
// an array of numbers between 0 and 1
grayscaleLightness: [],
// an array of numbers between 0 and 1
colorSaturation: [],
// an array of numbers between 0 and 1
grayscaleSaturation: [],
// Any valid color identifier
background: null
};
![]()
gridy-sprites 的配置参数:
let options = {
// Use different colors for eyes and mouth
colorful: false
};
![]()
initials-sprites 的配置参数:
let options = {
// amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
backgroundColors: [],
// background color
// Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
backgroundColorLevel: 600,
// font size
// Number between 1 and 100
fontSize: 50,
// Number between 0 and 2
chars: 2,
// bold?
bold: false
};
![]()
Avatars插件的github网址为:https://github.com/DiceBear/avatars
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!





















