使用帆布画出文字就好啦
函数gen_text_img(大小、s) {
让颜色=[
“rgb(239150年,26)”“rgb (255、58201)”,“rgb (111、75255)”,“rgb(36174年,34)”,“rgb (80、80、80)”
];
让cvs=document.createElement(“画布”);
cvs。setAttribute(“宽度”,大小[0]);
cvs。setAttribute(“高度”,大小[1]);
让ctx=cvs.getContext (2 d);
ctx。fillStyle=颜色[Math.floor (math . random () * (colors.length)));
ctx。fillRect(0, 0,大小[0],[1]);
ctx。fillStyle=的rgb (255255255);
ctx。字体大?[0]* 0.6 +“px Arial”;
ctx。textBaseline=爸屑洹?
ctx。textAlign=爸行摹?
ctx.fillText(年代,大小[0]/2,大小[1]/2);
返回cvs。”image/jpeg toDataURL (', 1);
}
效果如下某些浏览器文字不能水平居中,暂时没有找到解决办法:
而头像是名字的第一个文字和背景颜色生成,文字颜色为白色,背景自动生成。
<强> 2,分析
由于名字图像是自动生成,背景颜色不一样,可以考虑一下几种方法:
,,,1)使用随机数来自动生成一个16进制颜色字符串,作为头像的背景颜色;
,,,2)获取名字的第一个字,转换成16进制文字颜色字符串,作为头像背景颜色;
这里会有朋友说,为什么不使用base64转码为颜色值呢,在这里小编也测试过,通过base64转码后的值,很多转换成了F之后的字母,在转换成颜色时,取值无效,截图如下:
所以这里不使用这样方法。
第一种方法比较简单,但是不可控(同一个名字的头像背景颜色可能不一样),所以我们采用第二种方式;
<强> 3,实现
//获取名字第一个文字,转换成16进制颜色值
const{名称}=this.props;
让firstName=名字。substring (1,0);
tranColor=(名字)=比;{
var str=";
(var=0;i之前
这样就可以生成一个合法的16进制颜色字符串,如果需要配置不同的透明度,可以多取一位,str。片(1、5),因为这里转换为16进制,所以这里只取前3位(1 ~ 4)
<强> 4,结果
转换果如下:
效果:
可以看到名字相同时,头像背景颜色也是相同的,比随机数要好很多
到此这篇关于js实现文字头像的生成代码的文章就介绍到这了,更多相关js文字头像内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
