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 相关文章推荐
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
jquery复选框全选/取消示例
Dec 30 Javascript
jquery删除提示框弹出是否删除对话框
Jan 07 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
详解angularjs4部署文件过大解决过程
Dec 05 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 Javascript
如何在JS文件中获取Vue组件
Sep 16 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
2016/04/27 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
详解vuejs之v-for列表渲染
2017/06/22 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python读取文本绘制动态速度曲线
2018/06/21 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
英国网上自行车商店:Tredz Bikes
2019/10/29 全球购物
高一数学教学反思
2014/02/07 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
大型营销活动计划书
2014/04/28 职场文书
学校校庆演讲稿
2014/05/22 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
英语教师个人工作总结
2015/02/09 职场文书
法院个人总结
2015/03/03 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers