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<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 文字头像内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript头像上传插件源码分享

    JavaScript头像上传插件源码分享

    本文实例为大家分享了JavaScript头像上传插件源码,供大家参考,具体内容如下 效果图: 源码: cxc.js /* cxc.js 频繁操作公共接口 */ var $ = function (id) { return document.getElementById(id); }; //通过id获取dom对象 var A = function (msg) { alert(msg); }; //alert的简写 var EmptyFun = function () { }; // 空方法 var

  • vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）

    1.效果图如下 2.vue代码如下 <el-carousel type="card" arrow="always" :loop="false" :initial-index="1" indicator-position="none" :autoplay="false"> <el-carousel-item v-for="(items, index) in it

  • JS实现带鼠标效果的头像及文章列表代码

    JS实现带鼠标效果的头像及文章列表代码

    本文实例讲述了JS实现带鼠标效果的头像及文章列表代码.分享给大家供大家参考.具体如下: 这是一种带图片功能的文章或新闻列表功能,鼠标滑过标题列表显示说明和图片,多见于SNS交友网站,不过你喜欢的话,你完全可以用哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mouse-style-face-article-list-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.

  • web前端开发upload上传头像js示例代码

    这次分享一个简易的上传头像示例,其大致流程为: 一.将选择的图片转为base64字符串 function preview(file) {//预览图片得到图片base64 var prevDiv = document.getElementById('preview'); if (file.files && file.files[0]) { var reader = new FileReader(); reader.onload = function(evt){ prevDiv.innerHT

  • js实现Select头像选择实时预览代码

    js实现Select头像选择实时预览代码

    本文实例讲述了js实现Select头像选择实时预览代码.分享给大家供大家参考.具体如下: 这里演示js实现Select头像选择,实时预览效果,在留言或评论的时候,让用户简易的选择头像,以前最常见的方式是使用单选框,当然使用其它的形式也可以,比如今天这个Select,下拉选框选择头像,也是不错的体验. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-ico-pic-view-codes/ 具体代码如下: <!DOCTYPE ht

  • canvas+gif.js打造自己的数字雨头像的示例代码

    canvas+gif.js打造自己的数字雨头像的示例代码

    前天 是1024程序员节,不知道各位看官过的怎么样.既然是过节,就要有个过节的样子,比方说,换个头像

  • 使用cropper.js裁剪头像的实例代码

    使用cropper.js裁剪头像的实例代码

    最近项目需要头像裁剪的功能,在网上找了一下,发现了github上的cropper项目还不错,借鉴了一下..用起来挺简单的,下面是我做的一个小例子: 开始先放个成品图: 下面给出前后端的代码 前端页面是一个单独的jsp页面,用来做弹出层来裁剪图片比较好. 关于jsp页面引用的两个关于cropper的 文件,我就不提供了.大家需要的可以去官方的github上去下载. 地址:https://github.com/fengyuanchen/cropper <%@ page language="ja

  • 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

  • JS实现自动切换文字的导航效果代码

    JS实现自动切换文字的导航效果代码

    本文实例讲述了JS实现自动切换文字的导航效果代码.分享给大家供大家参考.具体如下: 这里介绍支持自动切换文字的导航菜单效果,实际上看上去并不像菜单,猛一看倒像是一个Select下拉框,两侧带有箭头控制按钮,点击左侧则向上切换菜单文字,点击右侧则切换到一个菜单项内容,也可自动切换,鼠标不点击的时候菜单会自动变化文字. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-cha-font-nav-style-codes/ 具体代码如下:

  • js变形金刚文字特效代码分享

    js变形金刚文字特效代码分享

    为大家分享的js变形金刚文字特效代码如下 -----------------------------------------------效果演示----------------------------------------------- <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js变形金刚文字特效&l

  • JS实现的新浪微博大厅文字内容滚动效果代码

    JS实现的新浪微博大厅文字内容滚动效果代码

    本文实例讲述了JS实现的新浪微博大厅文字内容滚动效果代码.分享给大家供大家参考,具体如下: 新浪微博大厅滚动tweets-slide,JavaScript实现,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过今天发现这款竟然还要好,不敢独享,希望需要的朋友喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-sina-txt-scroll-tweets-slide-codes/ 具体代码如下: <!doctype html>

  • JS实现来回出现文字的状态栏特效代码

    JS实现来回出现文字的状态栏特效代码

    本文实例讲述了JS实现来回出现文字的状态栏特效代码.分享给大家供大家参考,具体如下: 运行这款来回出现文字的状态栏特效时,请注意页面左下角的状态栏.貌似IE8以上版本看不到效果唉.那么究竟是如何实现的呢?主要是用函数来显示消息,根据place的值取当前需显示的字符串,准备在300毫秒后收起显示,将需取的字符串长度计数器加一准备下一次显示:同时使用函数隐藏消息,取Message右边的一定长度的字符串,设定消隐下一个字符的延时. 运行效果截图如下: 在线演示地址如下: http://demo.jb5

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

  • JS文字球状放大效果代码分享

    JS文字球状放大效果代码分享

    很酷的放大镜放大文字的效果,超赞! 先展示一下效果图: 大家先运行代码试一试-------------------------------------效果演示------------------------------------------- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta http-equiv="imagetoolbar" content="no

  • java 生成文字图片的示例代码

    本文主要介绍了java 生成文字图片的示例代码,分享给大家,具体如下: import java.awt.Color; import java.awt.Font; import java.awt.FontMetrics; import java.awt.Graphics; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import javax.imageio.ImageIO;

随机推荐