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获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
Javascript动画效果(1)
Oct 11 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
浅谈Node异步编程的机制
Oct 18 Javascript
vue watch监听对象及对应值的变化详解
Feb 24 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
PHP 数组遍历顺序理解
2009/09/09 PHP
对象失去焦点时自己动提交数据的实现代码
2012/11/06 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
Python使用Supervisor来管理进程的方法
2015/05/28 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
了解一下python内建模块collections
2020/09/07 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
市优秀教师事迹材料
2014/02/05 职场文书
竞选团支书演讲稿
2014/04/28 职场文书
五好关工委申报材料
2014/05/31 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
购房委托书
2014/10/15 职场文书
客服专员岗位职责
2015/02/10 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS