mysql设置默认头像_默认头像方法-使用用户名称第一个字符作为默认头像

这篇博客展示了如何利用JavaScript和HTML5 canvas为没有上传头像的用户生成默认头像,方法是取用户名的第一个字符并结合颜色生成个性化头像。代码来源于码云网站,通过观察和理解代码可以实现类似功能。
摘要由CSDN通过智能技术生成

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='

{2}
',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('

思路一样就不造轮子了,这是码云网站的给没有上传图像用户指认用户名第一个字符作为头像的代码。

3094f54efc457c0c0a4a3e989eaf5bdd.png

自己可以代码反压缩一下看里面的具体思路。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值