欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 工具类 > js动态生成用户头像插件Avatars

js动态生成用户头像插件Avatars

js动态生成用户头像插件Avatars

关键词:头像插件,js生成头像插件,js头像插件,js生成头像,js插件,avatars,js动态头像插件,jquery库,gongjulei

描述:Avatars是一款可以动态生成用户头像js插件。Avatars可以在浏览器或node.js环境中,动态生成各种漂亮的、基于svg的用户头像。

简要教程

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

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_gongjulei/9706.html

 在线演示  免费下载
编号:201907080000009706
大小:0.41MB
上传时间:2019-07-12 06:54
素材由用户"18066221521"上传分享。

标签

最新推荐素材

与js动态生成用户头像插件Avatars相关的素材

.