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 相关文章推荐
关于JS中的闭包浅谈
Aug 23 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
删除javascript所创建子节点的方法
May 21 Javascript
异步安全加载javascript文件的方法
Jul 21 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
backbone简介_动力节点Java学院整理
Jul 14 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
分析javascript原型及原型链
Mar 18 Javascript
微信小程序实现无限滚动列表
May 29 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
javascript使用Blob对象实现的下载文件操作示例
Apr 18 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
使用PHP批量生成随机用户名
2008/07/10 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
php 基础函数
2017/02/10 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
两个listbox实现选项的添加删除和搜索
2013/03/01 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
js数组去重的方法总结
2019/01/18 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
简单的Python的curses库使用教程
2015/04/11 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
python爬虫实现中英翻译词典
2019/06/25 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
python中调试或排错的五种方法示例
2019/09/12 Python
PyCharm更改字体和界面样式的方法步骤
2019/09/27 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
新百伦折扣店:Joe’s New Balance Outlet
2016/08/20 全球购物
军用级手机壳,专为冒险而建:Zizo Wireless
2019/08/07 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
语文教学随笔感言
2014/02/18 职场文书
《火烧云》教学反思
2014/04/12 职场文书
2014党员学习习主席讲话思想汇报
2014/09/15 职场文书
军训个人总结
2015/03/03 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL