js实现文字头像的生成代码


Posted in Javascript onMarch 07, 2020

使用canvas画出文字就好啦

function gen_text_img(size, s) {
 let colors = [
 "rgb(239,150,26)", 'rgb(255,58,201)', "rgb(111,75,255)", "rgb(36,174,34)", "rgb(80,80,80)"
 ];
 let cvs = document.createElement("canvas");
 cvs.setAttribute('width', size[0]);
 cvs.setAttribute('height', size[1]);
 let ctx = cvs.getContext("2d");
 ctx.fillStyle = colors[Math.floor(Math.random()*(colors.length))];
 ctx.fillRect(0, 0, size[0], size[1]);
 ctx.fillStyle = 'rgb(255,255,255)';
 ctx.font = size[0]*0.6+"px Arial";
 ctx.textBaseline = "middle";
 ctx.textAlign = "center";
 ctx.fillText(s,size[0]/2,size[1]/2);

 return cvs.toDataURL('image/jpeg', 1);
}

效果如下某些浏览器文字不能水平居中,暂时没有找到解决办法:

js实现文字头像的生成代码 

知识点补充:前端小结:中文转颜色 - 实现根据名字自动生成头像

1、需求

    项目中有个需求,要求显示人员头像和名称列表

js实现文字头像的生成代码

而头像是名字的第一个文字和背景颜色生成,文字颜色为白色,背景自动生成。

2、分析

由于名字图像是自动生成,背景颜色不一样,可以考虑一下几种方法:

     1)使用随机数来自动生成一个16进制颜色字符串,作为头像的背景颜色;

     2)获取名字的第一个字,转换成16进制文字颜色字符串,作为头像背景颜色;

这里会有朋友说,为什么不使用base64转码为颜色值呢,在这里小编也测试过,通过base64转码后的值,很多转换成了F之后的字母,在转换成颜色时,取值无效,截图如下:

js实现文字头像的生成代码

所以这里不使用这样方法。

第一种方法比较简单,但是不可控(同一个名字的头像背景颜色可能不一样),所以我们采用第二种方式;

3、实现

// 获取名字第一个文字,转换成16进制颜色值
const { name } = this.props;
let firstName = name.substring(1, 0);
 
tranColor = (name) => {
 var str ='';
 for(var i=0; i<name.length; i++) {
  str += parseInt(name[i].charCodeAt(0), 10).toString(16);
 }
 return '#' + str.slice(1, 4);
}
const bgColor = this.tranColor(name)

这样就可以生成一个合法的16进制颜色字符串,如果需要配置不同的透明度,可以多取一位 str.slice(1, 5),因为这里转换为16进制,所以这里只取前3位(1 ~ 4)

4、结果

转换果如下:

js实现文字头像的生成代码

效果:

js实现文字头像的生成代码

可以看到名字相同时,头像背景颜色也是相同的,比随机数要好很多

总结

到此这篇关于js实现文字头像的生成代码的文章就介绍到这了,更多相关js 文字头像内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
深入理解(function(){... })();
Aug 16 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
express启用https使用小记
May 21 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 Javascript
JavaScript队列结构Queue实现过程解析
Mar 07 #Javascript
原生JS实现萤火虫效果
Mar 07 #Javascript
JavaScript实现轮播图片完整代码
Mar 07 #Javascript
JS实现瀑布流效果
Mar 07 #Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 #Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 #Javascript
node创建Vue项目步骤详解
Mar 06 #Javascript
You might like
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
PHP 选项及相关信息函数库
2006/12/04 PHP
Dedecms常用函数解析
2008/02/01 PHP
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
分享PHP计算两个日期相差天数的代码
2015/12/23 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
用正则获取指定路径文件的名称
2007/02/27 Javascript
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
使用javascript实现监控视频播放并打印日志
2015/01/05 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
NodeJs读取JSON文件格式化时的注意事项
2016/09/25 NodeJs
Javascript动画效果(2)
2016/10/11 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
详解js加减乘除精确计算
2019/03/19 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
用python代码做configure文件
2014/07/20 Python
python提取页面内url列表的方法
2015/05/25 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
Python常用GUI框架原理解析汇总
2020/12/07 Python
python实现学生信息管理系统源码
2021/02/22 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
PHP面试题集
2016/12/18 面试题
数控机床专业自荐信
2014/05/19 职场文书
校园文明标语
2014/06/13 职场文书
病假条格式范文
2015/08/17 职场文书
担保书格式范文
2015/09/22 职场文书
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL