javascript填充默认头像方法


Posted in Javascript onFebruary 22, 2018

在我的不少项目中,都有缺省头像的问题。为了保持个性和方便辨认,会给没有头像的用户填充带名字的头像。

代码分享:https://github.com/joaner/namedavatar

javascript填充默认头像方法

调用简单

如果上传头像不存在,直接会在 <img> 标签上填充默认头像,用户名从alt获取:

<img alt="李连杰" width="32" style="border-radius: 100%">
<img src="./invalid.jpg" alt="Tom Hanks" width="40">

<script>
requirejs('namedavatar', function(namedavatar){
 namedavatar.config({
  nameType: 'lastName',
 })

 namedavatar.setImgs(document.querySelectorAll('img[alt]'), 'alt')
})
</script>

如果<img src="./invalid.jpg">资源无效,namedavatar.setImgs()就会填充alt里的用户名,src变成这样

<img id="avatar1" src="data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect fill="#9C27B0" x="0" y="0" width="100%" height="100%"></rect><text fill="#FFF" x="50%" y="50%" text-anchor="middle" alignment-baseline="central" font-size="16" font-family="Verdana, Geneva, sans-serif">Hanks</text></svg>">

相比其它类似项目

  1. 首先对中文姓名的支持更好
  2. 直接在<img>标签上填充data URI,绿色无添加,应用成本更低
  3. 基于<svg>,没有用<canvas>渲染,性能也会好一点
  4. 支持的配置项更多,比如可以定义显示哪部分,或是随机背景颜色

也支持Vue.js的 directive 指令方式

import { directive } from 'namedavatar/vue'
// register as directive
Vue.directive('avatar', directive);
// in vue template
<template>
<img v-avatar="'Tom Hanks'" width="36"/>
</template>

以上就是本次整理的全部内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
关于跨站脚本攻击问题
Dec 22 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
浅谈js中变量初始化
Feb 03 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
基于socket.io+express实现多房间聊天
Mar 17 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
jquery.pagination.js分页使用教程
Oct 23 jQuery
详解在Angular4中使用ng2-baidu-map的方法
Jun 19 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 #Javascript
利用CDN加速react webpack打包后的文件详解
Feb 22 #Javascript
node内置调试方法总结
Feb 22 #Javascript
详解vue移动端日期选择组件
Feb 22 #Javascript
webpack 单独打包指定JS文件的方法
Feb 22 #Javascript
webpack中使用iconfont字体图标的方法
Feb 22 #Javascript
微信小程序之圆形进度条实现思路
Feb 22 #Javascript
You might like
用PHP开发GUI
2006/10/09 PHP
php简单防盗链实现方法
2015/07/29 PHP
jquery异步调用页面后台方法&amp;#8207;(asp.net)
2011/03/01 Javascript
javascript之querySelector和querySelectorAll使用说明
2011/10/09 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
解决VUEX兼容IE上的报错问题
2018/03/01 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
在vue中使用echars实现上浮与下钻效果
2019/11/08 Javascript
在vue中使用vant TreeSelect分类选择组件操作
2020/11/02 Javascript
python 布尔操作实现代码
2013/03/23 Python
python实现文本文件合并
2015/12/29 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
python通过Windows下远程控制Linux系统
2018/06/20 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
python获取txt文件词向量过程详解
2019/07/05 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
下载官网python并安装的步骤详解
2019/10/12 Python
Tensorflow实现在训练好的模型上进行测试
2020/01/20 Python
python_mask_array的用法
2020/02/18 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
校园标语大全
2014/06/19 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
幼儿园六一主持词
2015/06/30 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记