Vue 项目中生成类似 GitHub 的随机头像

最近个人项目中有头像需求,就想起 GitHub 的随机头像,通过 identicon.jsblueimp-md5 两个第三方库实现了,记录一下。

一、实现效果

二、封装组件 - avatar.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<template>
<img class="avatar" :src="url">
</template>

<script>
import Identicon from 'identicon.js'
import md5 from 'blueimp-md5'

export default {
props: {
num: [Number]
},
computed: {
url() {
return 'data:image/png;base64,' + new Identicon(md5(this.num || 0), 420).toString()
}
}
}
</script>

<style lang="scss" scoped>
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
</style>

三、参考资料

1、identicon.js
2、JavaScript-MD5

以上

随笔标题:Vue 项目中生成类似 GitHub 的随机头像

随笔作者:刘先玉

发布时间:2019年09月16日 - 15:42:39

最后更新:2019年09月16日 - 15:42:39

原文链接:https://liuxianyu.cn/article/random-avatar-md5.html