前端使用canvas实现昵称首个文字转换成图片功能

最近在用腾讯会议的时，看到要是没有设置自定义头像时会有个默认头像，就是昵称的第一个字母。上班摸鱼时突然想用原生的画布实现这个功能。

canvas有能够转换成bas64的功能，说以直接写js代码就行，直接在img标签上使用bas64代码串就OK了。

先贴一个效果图

 

<template>
    <div> 
       
                    <div class="img"><img :src="touimg"/></div>
      
    </div>
</template>

<script>
import {textBecomeImg} from "../lib/textimg"
 
export default {
   
    data(){
        return {
           
            touimg:''
        }
    },
    mounted(){
        this.touimg=textBecomeImg("张已核销")
    },
    methods:{
        
    }
  
}

</script>

 引用的文件

export function textBecomeImg(text, fontsize=66, fontcolor="#000") {
    var canvas = document.createElement('canvas');
   
    var context = canvas.getContext('2d');
    /* 方法一：适用于多文字或字母
    //画布的宽度等于=获取字体宽度+我自定义了个内边距（10）
    canvas.width=context.measureText(text).width+10
    //画布的高度度等于=获取大小+我自定义了个内边距（10）
    canvas.height=parseInt(fontsize)+10
    */ 
    
    /*
        //方法二：适用于只显示一个文字或字母
        因为就一个文字或字母，说以我就固定大小了，在实际应用当中，我们可以直接设置图片大小就可以了
    */ 
    let firsttxt=text.slice(0,1)
    canvas.width = 120;
    canvas.height= 120;
    console.log(canvas.width,canvas.height)
    // 擦除矩形，擦除的意思是把该区域变为透明
    context.clearRect(0, 0, canvas.height, canvas.height);
    
     
    context.fillStyle = fontcolor;
    context.font = fontsize + "px Arial";
    context.textBaseline = "middle"
    context.textAlign = 'center'; 
    context.fillText(firsttxt,  canvas.width / 2,  canvas.height / 2 + 5)

    var dataUrl = canvas.toDataURL('image/png');//注意这里背景透明的话，需要使用png
    return dataUrl;
}

然后可以自定义样式，这样就是和头像一样了 

 

<style lang="less" scoped>

    .img{
        background-color: #eee;
        width: 100px;
        border-radius: 50%;
        img{
            border-radius: 50%;
            width: 100%;
        }
    }


</style>