java根据名称生成头像_js实现文字头像的生成代码
使用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);
}
效果如下某些浏览器文字不能水平居中,暂时没有找到解决办法:
知识点补充:前端小结:中文转颜色 - 实现根据名字自动生成头像
1、需求
项目中有个需求,要求显示人员头像和名称列表
而头像是名字的第一个文字和背景颜色生成,文字颜色为白色,背景自动生成。
2、分析
由于名字图像是自动生成,背景颜色不一样,可以考虑一下几种方法:
1)使用随机数来自动生成一个16进制颜色字符串,作为头像的背景颜色;
2)获取名字的第一个字,转换成16进制文字颜色字符串,作为头像背景颜色;
这里会有朋友说,为什么不使用base64转码为颜色值呢,在这里小编也测试过,通过base64转码后的值,很多转换成了F之后的字母,在转换成颜色时,取值无效,截图如下:
所以这里不使用这样方法。
第一种方法比较简单,但是不可控(同一个名字的头像背景颜色可能不一样),所以我们采用第二种方式;
3、实现
// 获取名字第一个文字,转换成16进制颜色值
const { name } = this.props;
let firstName = name.substring(1, 0);
tranColor = (name) => {
var str ='';
for(var i=0; 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 文字头像内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
java根据名称生成头像_js实现文字头像的生成代码相关推荐
- java实现星级评分功能_JS实现星星评分功能实例代码(两种方法)
一.方法1 1.用到图片 2.结构和样式 Document ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-st ...
- java代码:通过名称生成企业名称或者是个人的名字生成头像
我们经常会看看钉钉这个办公软件,如果你没有传头像上去,他会默认生成一个带有你的名字的头像,这个是怎么生成的呢,有很多需求里面可能也会有 这个要求,就是通过一个名词生成一个头像,接下来我和大家说一下具体 ...
- JAVA生成九宫格图片 微信群头像(不限制张数)拿走即可用
废话不多说 先上效果 再上代码 package cn.specil.util.file;import javax.imageio.ImageIO; import java.awt.*; import ...
- 安卓开发 根据view布局动态生成带文字头像
根据view布局动态生成带文字头像 现在很多软件在没设置头像的时候都会根据用户的名字生产一个头像展示,类似钉钉,下面就看看在安卓里面如何做到这样的效果吧. 可能下面方法不是最佳,但是思路应该没问题. ...
- JAVA模仿钉钉生成钉钉群组头像
钉钉群组头像最多4张,根据大神的java实现仿微信群组合头像改的,地址:https://www.cnblogs.com/zovon/p/4345501.html import java.awt.Col ...
- Vue自动生成文字头像插件
在开发过程中,我们有时需要为新注册用户自动生成一个头像,就像gitee中一样,此时,我们可以使用vue中的一个插件:vue-avatar,该插件的使用方法如下: 1.下载插件 2.在需要生成文字头像的 ...
- .NET Core使用skiasharp文字头像生成方案(基于docker发布)
一.问题背景 目前.NET Core下面针对于图像处理的库微软并没有集成,在.NET FrameWork下我们已经习惯使用System.Drawing类库做简单的图像处理,到了.NET Core下一脸 ...
- java图像处理001---图像合成_java实现雨滴头像效果_可以放在地图上使用_自动生成雨滴头像
JAVA技术交流QQ群:170933152 公开啦,看看有没有帮助,分享吧 处理前的三张图片: 实现了下面这种效果: 雨滴图像,42*67 头像图片 可以是任意的,到时候自己找就可以 p ...
- Python: 生成带用户昵称的头像
Python: 生成带用户昵称的头像 需求 新建用户后,根据用户输入的昵称生成图片.(例:注册"钉钉"用户后,头像根据输入的名字生成) 开发环境 Windows 10 Python ...
最新文章
- 面了BAT,我总结了他们会问的JVM基础知识
- App设计灵感之十二组精美的手机闹钟App设计案例
- JS实现省市联动效果
- oracle 数据库查询 COALESCE字符函数
- jquery查找ul属性不是hide,jQuery的ul显示/隐藏功能
- spring boot整合shiro继承redis_Springboot+Shiro+redis整合
- 万圣趴的神秘南瓜仙人,送你3本惊喜Python好书
- Linux服务器安装JavaWeb环境(四) Sentinel,Xxl-Job,Seata
- 人工智能如何改变物联网?
- Laravel服务容器
- 自制TXT文本分割工具
- 史上最全的工控类软件链接 快收藏备用吧
- 驱动开发:BSOD 0xC4_f6 句柄问题
- 常见的距离算法和相似度(相关系数)计算方法
- 中国工程咨询行业十四五投资机会与运营风险评估报告2022-2028年
- 哥大计算机专业 世界排名,2020年哥伦比亚大学计算机系统排名
- 前端学习-CSS京东导航栏
- 正益移动王国春:布局在是与不是之间
- [python] fileinput模块
- break,returned,和continue
热门文章
- 无线渗透(六)WPS、伪造AP
- 下载spotify音乐_完成播放列表或专辑后如何停止Spotify停止自动播放音乐
- 3G时代五大手机操作系统
- 【2020年圣诞节福利来啦】测评chrome插件,芒果VIP年卡等你拿,人人有奖!
- 0617绯色博客园开园公告
- java刷卡计时计次源码美萍_Java 定时调配 Timer 类和定任务 TimerTask 类(一篇详细且完整的源码分析以及四种简单的使用方法)...
- 有道笔记手机搜索_有道云笔记手机版下载-有道云笔记 安卓版v7.0.2.2-PC6安卓网...
- 4.Wireshark下载安装和使用教程
- 互联网早报:字节跳动推出“飞书文档”独立App.....
- 基于stm32通过HC_05(ZS-040)蓝牙模块用手机控制stm32开发板上led灯的亮灭