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 相关文章推荐
云网广告中的代码,提示出错,大家找找
Nov 21 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
对Vue- 动态元素属性及v-bind和v-model的区别详解
Aug 27 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
Aug 30 Javascript
JS前端知识点 运算符优先级,URL编码与解码,String,Math,arguments操作整理总结
Jun 27 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.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
PHP基于递归实现的约瑟夫环算法示例
2017/08/27 PHP
列表内容的选择
2006/06/30 Javascript
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
JS应用正则表达式转换大小写示例
2014/09/18 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
python对excel文档去重及求和的实例
2018/04/18 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
详解Python 切片语法
2019/06/10 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
python对文件的操作方法汇总
2020/02/28 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
iframe与window.onload如何使用详解
2020/05/07 HTML / CSS
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
车辆年检委托书范本
2014/10/14 职场文书
孝女彩金观后感
2015/06/10 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
JS Canvas接口和动画效果大全
2021/04/29 Javascript