还在为选一个个性十足,不同于别人的头像而烦恼吗?12,230,590,464个头像够你选择够不够?

Multiavatar

Multiavatar头像生成,要多少有多少-编程范儿

一款集多文化头像生成器,它可以根据不同的种族,不同的文化,不同的年龄,不同的世界观,以及不同的生活方式为你生成独一无二的头像

事实上,它可以根据算法生成12,230,590,464个不同的头像

Multiavatar头像生成,要多少有多少-编程范儿

安装和使用方式

引入script资源,传入任何的字符串类型的参数到“multiavatar”方法中,它将返回代表这个头像的一段SVG的代码。

npm方式

npm i @multiavatar/multiavatar
const multiavatar = require('@multiavatar/multiavatar')
let svgCode = multiavatar('Binx Bond')

使用script标签方式

<script src="multiavatar.min.js"></script>
<script>
var avatarId = 'Binx Bond';
var svgCode = multiavatar(avatarId);
</script>

关于这个库的原理

这12亿个头像的生成都是根据最初的48(16x3)个基础头像生成的,位于项目的根目录svg下,每个头像包含6个部分

  • 背景
  • 衣服
  • 头部
  • 眼睛
  • 身体上部

每个头像会包含最多三种不同的颜色,这也就是以上3的由来,根据排列组合最终得到

48^6 = 12,230,590,464

另外作者还提供了直接生成头像的API,如下,后面一段就是头像的字符串,返回的是SVG代码

https://api.multiavatar.com/v1/Starcrasher
let avatarId = 'Binx Bond'
fetch('https://api.multiavatar.com/v1/'+ JSON.stringify(avatarId))
.then(res => res.text())  
.then(svg => console.log(svg))

官网

https://multiavatar.com/