最近博客升级,想让评论的用户都有一个独一无二的头像,但是用户是不需要登录的,所以系统没有记录用户的个人信息,想法是让用户保存一个随机ID,通过这个ID找到他的头像即可。
在逛GitHub的时候,发现了两个随机头像的生成开源工具。分别是:
multiavatar
Avatar-Maker
试了一下刚好可以用来生成头像。
1、multiavatar
GitHub地址:
https://github.com/multiavatar/Multiavatar
在线体验地址:
https://multiavatar.com/
一个随机头像生成的工具,但不支持手动选择头像的特征。

项目由普通的 JavaScript 编写的。只有一个库(SHA-256)被使用,并集成到脚本中,SVG 中的初始字符设计也集成到脚本中。
每个头像由6部分组成:
1.Environment 肤色
2.Clothes 衣服
3.Head 头
4.Mouth 嘴巴
5.Eyes 眼睛
6.Top 头发
官方表示共有120亿个随机头像,代表了来自不同种族、不同文化、不同年龄、不同世界观和不同生活方式的人们,所以你不需要担心重复。

生成后的头像,支持PNG和 SVG 格式返回和下载,所以说它也是支持在线调用的,使用方法如下:
<script src="https://cdn.jsdelivr.net/npm/@multiavatar/multiavatar/multiavatar.min.js"></script>
<script>
var avatarId = 'Binx Bond';
var svgCode = multiavatar(avatarId);
</script>
avatarId 表示一个随机的头像ID,只要你随便输入一个字符,就会对应一个头像。字符串也是 Multiavatar 脚本的输入,该脚本将提供的字符串转换成6个两位数字(范围00-47) ,每个数字代表最终化身的一个独立部分。
作者在multiavatar.js 文件中写了很多注释,大家如果想二次开发可以参考源码。
2、Avatar-Maker
GitHub地址:
https://github.com/favrora/Avatar-Maker
在线体验地址:
https://avatarx.netlify.app/
Avatar-Maker 是一个基于Vue的头像生成项目。
Avatar-Maker 相对上面的 multiavatar 好处就是它不但支持随机生成头像,而且还支持自定义选择组件生成头像。
你可以选择你喜欢的五官进行搭配,而且也是不会重复。

这个项目刚好弥补了上面multiavatar 这个项目的缺点,但是该项目未给出API接入文档,想要接入的可以尝试看一下项目的代码。
但是你要自定义生成头像并且下载PNG,直接在体验地址下载就可以了。
为选择头像烦恼的小伙伴们可以尝试一下。