vue用户没有头像用姓名首字母做头像

avatar.js

/**
*@param widths 画布宽
*@param heights 画布高
*@param fontSize 字体大小
*@param id canvas id值
*@param className img ID值或者类名
*@param name 用户名
*@param index 索引值
*/
export function draw(widths,heights,fontSize,id,className,name,index){var names = name.charAt(0)var canvas = document.getElementById(id)canvas.width = widthscanvas.height = heightsvar context = canvas.getContext('2d')const color1 = getColor()const color2 = getColor()if(color1 !== color2){context.fillStyle = color1context.fillRect(0,0,canvas.width,canvas.height)context.fillStyle = color2}//给画布字体加粗，注意：这里的 ' '是空格，如果没有空格或者为空字符串会不起作用，系统直接赋值默认值 10px sans-serifcontext.font = 'normal bold' + ' ' + fontSize + 'px sans-serif'context.textAlign = 'center'context.textBaseline = 'middle'context.fillText(names,fontSize,fontSize)var el = document.getElementById(className)//当传入的值为类名时，用这个//var el = document.getElementByClassName(className)[index]el.setAttribute('src',canvas.toDataURL('image/png'))
}
//获取动态的颜色
function getColor() {var str = '#'var colorArr = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f']for(var i = 0; i < 6; i++) {var num = parseInt(Math.random() * 16)str += colorArr[num]}return str
}

user.vue

<el-table :data='List'><el-table-column><template slot-scope='scope'><span v-if='scope.row.avatar'><img :src="'http://' + scope.row.avatar" alt='' width='40' height='40' style='border-radius: 50%'></span><span v-else><img :id="'Img' + scope.row.user_id" src='' alt='' width='40' height='40' style='border-radius: 50%'><canvas :id="'headImage' + scope.row.user_id" style='display: none'></canvas></span></template></el-table-column>
</el-table><script>
import {draw} from './avatar'
export default{data(){return{List:[]}},created(){this.getUser()},methods:{getUser(){this.$axios.get('xxx').then(res => {this.List = res.data.data//注意这里必须写在this.$nextTick(function(){})中，意在在页面渲染完成后在调用该方法，否则document.getElementByID（）拿不到元素this.$nextTick(function(){this.List.forEach(item => {if(!item.avatar) {draw(40,40,20,'headImage' + item.user_id,'Img' + item.user_id,item.realname,item.user_id)}})})})}}
}
</script>

vue用户没有头像用姓名首字母做头像相关推荐

vue用户头像地址为““时，用姓名首字母做头像
业务场景:个人资料或者用户头像没有图片地址时,默认使用户名字中第一个汉字做头像. 效果: 完整代码: <div class="left_img"><el-avat ...
vue中根据用户昵称首字母生成头像和颜色
需求:项目中需要做一个粗糙的评论板块,用户评论时需要显示头像,但是不需要去更换改头像思路:用户昵称首字母作为头像,并且根据用户首字母生成固定的颜色,否则每次颜色都会随机例如: 方法一 1.安装头像 ...
根据姓名首字母排序查询
1.前台需要List<HashMap<String,Object>>类型的数据,先对查询出的List<UserVo>进行处理. 后台查询已经将姓名首字母查询出来(数 ...
【工具封装】Python 字典列表按中文姓名首字母排序
第三方模块: 功能: 汉字拼音转换模块,将汉字转为拼音:可以用于汉字注音.排序.检索. 模块名称: pypinyin 官方文档: https://pypi.org/project/pyp ...
Android通讯录模糊查询搜索(号码,姓名,首字母简拼,全拼),批量选取联系人
Android通讯录模糊查询搜索(号码,姓名,首字母简拼,全拼),批量选取联系人公司最近的项目中遇到一个需求需要读取通讯录联系人,并需要支持对联系人的模糊查询及批量选取,网上找了好几个例子,模糊查询 ...
MySQL 汉字提取首字母、姓名首字母全拼、姓名转拼音
需要实现的功能要用函数来实现 1.汉字提取首字母 fristPinyin : 此函数是将一个中文字符串的第一个汉字转成拼音字母 (例如:"李"->l) CREATE FUNC ...
android 4.4.3上面，联系人的头像默认显示首字母，但是不支持中文字符,修改支持中文
在android 4.4.3上面,联系人的头像默认显示首字母,但是不支持中文字符,如下图: 如果联系人名字的第一位是英文字符(a-z || A-Z),则默认头像将显示该首字母. 如果支持中文时显示第一 ...
IOS开发汉字转拼音把用户名按照姓名首字母进行排序
//第一步汉字转拼音有2种方法一种是使用ChineseString 别人写的类第二种是IOS自带的方法我使用的便是第二种 NSMutableString *ms = [[NSMutable ...
SQL语句按照姓名首字母排序
Mysql 前言 UTF-8 GBK 前言最近小咸儿做项目,根据业务需求,需要将查出来的人员姓名按照拼音首字母进行排序,小咸儿选择在SQL语句上对姓名字段进行排序,这样查出来的人员就已经是排好序 ...

vue用户没有头像用姓名首字母做头像

vue用户没有头像用姓名首字母做头像相关推荐

最新文章

热门文章