默认头像方法-使用用户名称第一个字符作为默认头像
2017-11-09 11:18
525 查看
1 function(e,t){function n(n,i){n=n||"",i=i||60;var o,a,r,s,c,l,u=["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#eca0f1","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],d=String(n).toUpperCase().split(" ");return o=d.length==1?d[0]?d[0].charAt(0):"?":d[0].charAt(0)+d[1].charAt(0),e.devicePixelRatio&&(i*=e.devicePixelRatio),a=("?"==o?72:o.charCodeAt(0))-64,r=a%20,s=t.createElement("canvas"),s.width=i,s.height=i,c=s.getContext("2d"),c.fillStyle=u[r-1],c.fillRect(0,0,s.width,s.height),c.font=Math.round(s.width/2)+"px Arial",c.textAlign="center",c.fillStyle="#FFF",25>i?c.fillText(o,i/2,i/1.37):"U"===o||"V"===o||"W"===o?c.fillText(o,i/2,i/1.42):c.fillText(o,i/2,i/1.48),l=s.toDataURL(),s=null,l}if(n.transform=function(){Array.prototype.forEach.call(t.querySelectorAll("img[avatar]"),function(e,t){t=e.getAttribute("avatar"),e.src=n(t,e.getAttribute("width")),e.removeAttribute("avatar"),e.setAttribute("alt",t)})},"function"==typeof define&&define.amd)define(function(){return n});else if("undefined"!=typeof exports)"undefined"!=typeof module&&module.exports&&(exports=module.exports=n),exports.LetterAvatar=n;else{window.LetterAvatar=n;var i=window.MutationObserver||window.WebKitMutationObserver;if(i){var o={childList:!0,subtree:!0,characterData:!0},a=new i(function(){n.transform()});a.observe(t,o)}else t.addEventListener&&(t.addEventListener("DOMContentLoaded",function(){n.transform()}),t.addEventListener("DOMSubtreeModified",function(){n.transform()}),t.addEventListener("DOMNodeInserted",function(){n.transform()}))}}(window,document),function(){this.Flash={hasElement:!1,show:function(e,t){var n,i,o;return null==t&&(t="info"),o='<div data-notify="container" class="ui {0} message" role="alert"><i data-notify="dismiss" class="close icon"></i><span data-notify="message">{2}</span></div>',n={message:e},i={type:t},e?(i.delay=3e3,i.template=o,i.offset={x:10,y:30},i.element="#messages-container",this.hasElement||this.findOrInitElement(i),$.notify(n,i)):void 0},findOrInitElement:function(e){var t,n;return t=$(e.element),t.length||(n=e.element.replace("#",""),$("body").append('<div class="flash-messages" id="'+n+'"></div>')),this.hasElement=!0}}}.call(this)
思路一样就不造轮子了,这是码云网站的给没有上传图像用户指认用户名第一个字符作为头像的代码。
![](https://oscdn.geek-share.com/Uploads/Images/Content/201912/30/3094f54efc457c0c0a4a3e989eaf5bdd.jpg)
自己可以代码反压缩一下看里面的具体思路。
相关文章推荐
- discuz论坛去掉默认使用QQ秀,让用户不再使用QQ秀作为头像
- 电信入库有多个浏览器,在初始使用时默认选择一个不弹出给用户选择的方法
- YC2440开发板wince5.0默认的COM1是做为普通串口使用,让它作为调试串口使用的方法!
- iOS上的safrai不支持使用关键字作为对象属性名称或方法名称
- Windows 8系统默认开启的.Net Framework版本是4.0,而部分用户可能需要使用到3.5或以下版本,简单添加方法
- C++ 把枚举变量的名称,直接当字符串使用方法 字符串化符号 #
- WinSCP默认使用root用户登录的方法
- 宽高比例不固定的用户头像纵向居中的方法(不使用表格、代码精简、图片不变形)
- Rhino 是一个完全使用Java语言编写的开源JavaScript实现。Rhino通常用于在Java程序中,为最终用户提供脚本化能力。它被作为J2SE 6上的默认Java脚本化引擎。
- 使用用户控件时,网站运行没有问题,但生成网站时却出错:命名空间“ASP”中不存在类型或命名空间名称“ascx_ub_weightbar_ascx” 的解决方法
- 使用String.Format()方法时,作为普通字符的"{"和"}"要写成"{{"和"}}"。
- c#--编写一个名称为MyClass一个类,在该类中编写一个方法,名称为CountChar,返回值为整型,参数两个,第一个参数可以是字符串、整数、单精度、双精度,第二个参数为字符,方法功能返回第二个参
- 1.编写一个名称为MyClass一个类,在该类中编写一个方法,名称为CountChar,返回值为整型,参数两个,第一个参数可以是字符串、整数、单精度、双精度,第二个参数为字符,方法功能返回第二个参数在
- 工作日志记录:关于脉脉这款应用的默认用户头像的一种实现方法
- ucenter用户中心头像修改,不使用自带方法,不使用flash 转
- C++ 把枚举变量的名称,直接当字符串使用方法 字符串化符号 #
- 如何将枚举类型作为数据源绑定在一个DROPDOWNLIST上,并指定用户可见枚举的真实值是名称
- 使用反射实现根据名称动态创建窗体的几种方法
- 使用split分割多字符的字符串的方法
- 使用LdapContext的modifyAttributes方法无法更改用户密码的解决