vue生成一个姓名的头像图片Base64格式

关注微信公众号：每日玩机 获取ios、Android、tv、mac黑科技软件

本方法是写成了全局方法，用this.$userHead(name)调用，如需单独在一个页面中使用，也可以在页面中单独写成一个方法

	 /**
     * 生成一个姓名的头像图片（Base64）
     * @param {stirng} name 用户的名（最多两个字）
     */
    Vue.prototype.$userHead = name => {
      const num = parseInt(Math.random() * 100);
      const index = num % userHeadColor.length;
      const bg = userHeadColor[index];
      const w = 96;
      const h = 96;

      const can = document.createElement("canvas");
      can.width = w;
      can.height = h;
      const _ctxt = can.getContext("2d");
      _ctxt.fillStyle = bg;
      _ctxt.fillRect(0, 0, w, h);
      _ctxt.font = "bold 40px 苹方";
      _ctxt.fillStyle = "#FFF";
      _ctxt.textAlign = "center";
      _ctxt.textBaseline = "middle";
      _ctxt.fillText(name, w / 2, h / 2);
      return can.toDataURL();
    };

具体使用

<template>
	<img :src="img" alt="" />
	<div @click="getDefaultHead('名字')">
	    <span>使用默认头像</span>
	</div>
</template>
<script>
export default {
data() {
        return {
                img: "", 
            }
        };
    },
    methods:{
	    getDefaultHead(name) {
	            this.img = this.$userHead(name);
	    },
    }
}
</script>