有些需求, 为了区分用户, 会根据用户的首字母生成对应的头像使用, 面对这样的需求还是很多的, 比如腾讯会议等等
今天我们也来实现一下
首先, 我们先来写个函数, 需要传入字符串名称, 返回Base64编码格式的图片
返回的我们也调用获取了, 剩下的逻辑怎么写呢?
别着急, 我们一步一步来, 先将第一个字母或者汉字获取到
获取到之后, 就可以开始画了
const canvas = document.createElement("canvas");const context = canvas.getContext("2d");
我们给画布设置一下宽高
canvas.width = 100canvas.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')我们打印看一下
打开效果如下
效果就实现了, 这种需求用的地方还是很多的
今天我们就讲解到这里
我们下期见
