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

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

实现效果

封装组件

<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>