前端使用Canvas画一个带有名字首字母的头像

有些需求, 为了区分用户, 会根据用户的首字母生成对应的头像使用, 面对这样的需求还是很多的, 比如腾讯会议等等

今天我们也来实现一下

首先, 我们先来写个函数, 需要传入字符串名称, 返回Base64编码格式的

返回的我们也调用获取了, 剩下的逻辑怎么写呢?

别着急, 我们一步一步来, 先将第一个字母或者汉字获取到

获取到之后, 就可以开始画了

const canvas = document.createElement(“canvas”);
const context = canvas.getContext(“2d”);
我们给画布设置一下宽高

canvas.width = 100
canvas.height = 100
宽高设置好之后, 我们需要调用 clearRect 来擦除整个画布, 清除的区域尺寸设置为canvas 的宽高

context.clearRect(0,0,canvas.width, canvas.height)
绘制之前, 需要我们加点样式

context.fillStyle = ‘skyblue’;
context.font = ${66}px Arial
// 添加文本基线
context.textBaseline = ‘middle’
// 设置文本位置
context.textAlign = ‘center’
随后, 我们使用fillText方法进行绘制

context.fillText(subStr, canvas.width/2, canvas.height/2)
绘制完成, 调用toDataURL方法, 获取Base64编码格式

const nameImgUrl = canvas.toDataURL(‘img/png’)
我们打印看一下

打开效果如下

效果就实现了, 这种需求用的地方还是很多的

今天我们就讲解到这里

我们下期见