动态生成 Avatars 用户头像插件

PetitQ 其他代码 2019-6-29 2.33K 0 0

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
```
```
 
```
```
};
```

Github 网址为：https://github.com/DiceBear/avatars

动态生成 Avatars 用户头像插件

已有 583 人购买

永久更新：
演示数据：
提取码：c5nj

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

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

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

其他代码

动态生成 Avatars 用户头像插件

npm 安装：

使用

参数

动态生成 Avatars 用户头像插件

相关文章

手机端带农历的万年历jquery插件

炫酷3D立方体预加载loading特效

smoothScroll-Es5 平滑页面滚动效果插件

发表回复取消回复

热销模板

其他代码

npm 安装：

使用

参数

动态生成 Avatars 用户头像插件

相关文章

发表回复 取消回复

热销模板

发表回复取消回复