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 相关文章推荐
单击某一段文字改写文本颜色
Jun 06 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
jsonp跨域请求实现示例
Mar 13 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JQuery获取样式中的background-color颜色值的问题
2013/08/20 Javascript
使用jQuery和PHP实现类似360功能开关效果
2014/02/12 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
js实现简单的点名器随机色实例代码
2020/09/20 Javascript
使用Python画股票的K线图的方法步骤
2019/06/28 Python
tensorflow 报错unitialized value的解决方法
2020/02/06 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python requests模块安装及使用教程图解
2020/06/30 Python
美国嘻哈首饰购物网站:Hip Hop Bling
2016/12/30 全球购物
地球一小时倡议书
2014/04/15 职场文书
感恩的演讲稿
2014/05/06 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
鸡毛信观后感
2015/06/11 职场文书
思想品德课教学反思
2016/02/24 职场文书