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 相关文章推荐
javascript 最常用的10个自定义函数[推荐]
Dec 26 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
jQuery siblings()用法实例详解
Apr 26 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 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 删除记录实现代码
2009/03/12 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php合并js请求的例子
2013/11/01 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP isset empty函数相关面试题及解析
2020/12/11 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
一个JavaScript的求爱小特效
2014/05/09 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
PHP网页抓取之抓取百度贴吧邮箱数据代码分享
2016/04/13 Python
python变量不能以数字打头详解
2016/07/06 Python
Python3之读取连接过的网络并定位的方法
2018/04/22 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
物业经理求职自我评价
2013/09/22 职场文书
分公司经理岗位职责
2013/11/11 职场文书
药学专业大专生的自我评价
2013/12/12 职场文书
个人收入证明范本
2014/01/12 职场文书
个人委托书范本
2014/04/02 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
幼儿园见习总结
2015/06/23 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL