其他代码

动态生成 Avatars 用户头像插件

也想出现在这里?联系我们
面包多

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

npm 安装:

  1. $ npm install @dicebear/avatars --save
也想出现在这里?联系我们
创客主机

然后选择以下的头像类型进行安装。

  1. # male
  2. $ npm install @dicebear/avatars-male-sprites --save
  3.  
  4. # female
  5. $ npm install @dicebear/avatars-female-sprites --save
  6.  
  7. # identicon
  8. $ npm install @dicebear/avatars-identicon-sprites --save
  9.  
  10. # initials
  11. $ npm install @dicebear/avatars-initials-sprites --save
  12.  
  13. # bottts
  14. $ npm install @dicebear/avatars-bottts-sprites --save
  15.  
  16. # gridy
  17. $ npm install @dicebear/avatars-gridy-sprites --save
  18.  
  19. # avataaars
  20. $ npm install @dicebear/avatars-avataaars-sprites --save
  21.  
  22. # jdenticon
  23. $ npm install @dicebear/avatars-jdenticon-sprites --save

使用

  1. import Avatars from '@dicebear/avatars';
  2. import SpriteCollection from '@dicebear/avatars-male-sprites';
  3.  
  4. let avatars = new Avatars(SpriteCollection);
  5. let svg = avatars.create('custom-seed');

例如,要创建一个男生头像:

  1. let options = {};
  2. let avatars = new Avatars(sprites(options));
  3. let svg = avatars.create('custom-seed');

create()中的 custom-seed 是一个随机任意的字符串,随着字符串的不同,生成的头像也不相同。

参数

male-sprites 和 female-sprites 的配置参数:

  1. let options = {
  2.     mood: ['happy', 'sad', 'surprised']
  3. };

动态生成 Avatars 用户头像插件-创客云
identicon-sprites 的配置参数:

  1. let options = {
  2.  
  3.     // Distance to the edge of the image
  4.     padding: 0,
  5.  
  6.     // Background color
  7.     background: #FFF 
  8.  
  9. };

动态生成 Avatars 用户头像插件-创客云
bottts-sprites 的配置参数:

  1. let options = {
  2.  
  3.     // Possible values: amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
  4.     colors: [], 
  5.  
  6.     // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
  7.     primaryColorLevel: 600,
  8.  
  9.     // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
  10.     secondaryColorLevel: 400,
  11.  
  12.     // in percent
  13.     colorful: 100,
  14.     mouthChance: 100,
  15.     sidesChance: 100,
  16.     textureChance: 50,
  17.     topChange: 100,
  18.  
  19. };

动态生成 Avatars 用户头像插件-创客云
avataaars-sprites 的配置参数:

  1. let options = {
  2.  
  3.     // transparent, circle
  4.     style: 'transparent'
  5.  
  6.     // include or exclude passed options.
  7.     mode: 'include',
  8.  
  9.     // Possible values: longHair, shortHair, eyepatch, hat, hijab, turban
  10.     top: [],
  11.  
  12.     // in percent
  13.     topChance: 100,
  14.  
  15.     // Possible values: black, blue, gray, heather, pastel, pink, red, white
  16.     hatColor: [],
  17.  
  18.     // Possible values: auburn, black, blonde, brown, pastel, platinum, red, gray
  19.     hairColor: [],
  20.  
  21.     // Possible values: kurt, prescription01, prescription02, round, sunglasses, wayfarers
  22.     accessories: [],
  23.  
  24.     // in percent
  25.     accessoriesChance: 10,
  26.  
  27.     // Possible values: medium, light, magestic, fancy, magnum
  28.     facialHair: null,
  29.  
  30.     // in percent
  31.     facialHairChance: 10,
  32.  
  33.     // Possible values: auburn, black, blonde, brown, platinum, red
  34.     facialHairColor: [],
  35.  
  36.     // Possible values: blazer, sweater, shirt, hoodie, overall
  37.     clothes: [],
  38.  
  39.     // Possible values: black, blue, gray, heather, pastel, pink, red, white
  40.     clothesColor: [],
  41.  
  42.     // Possible values: close, cry, default, dizzy, roll, happy, hearts, side, squint, surprised, wink, winkWacky
  43.     eyes: [],
  44.  
  45.     // Possible values: angry, default, flat, raised, sad, unibrow, up
  46.     eyebrow: [],
  47.  
  48.     // Possible values: concerned, default, disbelief, eating, grimace, sad, scream, serious, smile, tongue, twinkle, vomit
  49.     mouth: [],
  50.  
  51.     Possible values: tanned, yellow, pale, light, brown, darkBrown, black
  52.     skin: []
  53.  
  54. };

动态生成 Avatars 用户头像插件-创客云
jdenticon-sprites 的配置参数:

  1. let options = {
  2.  
  3.     // an array of numbers between 0 and 360
  4.     hue: [],
  5.  
  6.     // Distance to the edge of the image
  7.     padding: 0,
  8.  
  9.     // an array of numbers between 0 and 1
  10.     colorLightness: [],
  11.  
  12.     // an array of numbers between 0 and 1
  13.     grayscaleLightness: [],
  14.  
  15.     // an array of numbers between 0 and 1
  16.     colorSaturation: [],
  17.  
  18.     // an array of numbers between 0 and 1
  19.     grayscaleSaturation: [],
  20.  
  21.     // Any valid color identifier
  22.     background: null 
  23.  
  24. };

动态生成 Avatars 用户头像插件-创客云
gridy-sprites 的配置参数:

  1. let options = {
  2.  
  3.     // Use different colors for eyes and mouth
  4.     colorful: false
  5.  
  6. };

动态生成 Avatars 用户头像插件-创客云
initials-sprites 的配置参数:

  1. let options = {
  2.  
  3.     // amber, blue, blueGrey, brown, cyan, deepOrange, deepPurple, agreenmber, grey, indigo, lightBlue, lightGreen, lime, orange, pink, purple, red, teal, yellow
  4.     backgroundColors: [],
  5.  
  6.     // background color
  7.     // Possible values: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
  8.     backgroundColorLevel: 600,
  9.  
  10.     // font size
  11.     // Number between 1 and 100
  12.     fontSize: 50,
  13.  
  14.     // Number between 0 and 2
  15.     chars: 2,
  16.  
  17.     // bold?
  18.     bold: false
  19.  
  20. };

动态生成 Avatars 用户头像插件-创客云
Github 网址为:https://github.com/DiceBear/avatars

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Supro - 极简电商网站模板WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!