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 相关文章推荐
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
node.js中的url.parse方法使用说明
Dec 10 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
js获取当前时间(昨天、今天、明天)
Nov 23 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 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
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
10款非常有用的 Ajax 插件分享
2012/03/14 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
angular2 ng2 @input和@output理解及示例
2017/10/10 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
vue-cli基础配置及webpack配置修改的完整步骤
2019/10/20 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
探究Python的Tornado框架对子域名和泛域名的支持
2015/05/02 Python
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
详解python while 函数及while和for的区别
2018/09/07 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
Yahoo的PHP面试题
2014/05/26 面试题
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
简单的大学生自我鉴定
2014/02/18 职场文书
工作求职信
2014/07/04 职场文书
三峡大坝导游词
2015/01/31 职场文书
毕业生党员个人总结
2015/02/14 职场文书
中学校园广播稿
2015/08/18 职场文书
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang