使用jQuery动态生成字母头像
jQuery动态生成字母头像是一种使用jQuery库和HTML5 canvas技术实现的个性化头像制作方法。用户可以通过输入自己的名字或昵称，系统会自动生成一个由名字首字母组成的头像。这种方法可以大大提高用户体验，让用户在网站或应用中拥有独特的个人标识。同时，由于使用了canvas技术，生成的头像具有较高的清晰度和美观度。此外，jQuery库的使用还可以简化JavaScript代码，提高开发效率。总之，jQuery动态生成字母头像是一种实用且富有创意的个性化头像制作方法，值得在实际项目中尝试和应用。
前几天看到一个站的头像挺花哨的，于是有了这篇文章。主要原理是通过JavaScript根据文字动态绘制图像，比较简单，代码比较少只有几行，使用起来挺方便的，WordPress好像已经有插件了，不喜欢用插件的朋友可以学习下如何实现的，移植到自己的网站中去。
首先需要jQuery，大家自己找一个，很好找的。
首先需要一个简单的容器，用来装头像数据，先写个简单的网页结构。
<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metacontent="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"name="viewport"><title></title>//引入jQuery<scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script></head><body>//图像显示容器，使用css控制样式，这里我写的圆形<imgsrc=""style="border-radius:50%;"class="img-circleheadImg"alt="UserImage">//绘图元素<canvasid="headImg"style="display:none"></canvas><scripttype="text/javascript">//js核心代码</script></body></html>js代码如下：<scripttype="text/javascript">$(function(){textToImg("代码狗",260,"#9b59b6");});functiontextToImg(name,size,color){//名字name=name||'';//图像大小size=size||60;//背景颜色varcolours=["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#8e44ad","#2c3e50","#f1c40f","#e67e22","#e74c3c","#00bcd4","#95a5a6","#f39c12","#d35400","#c0392b","#bdc3c7","#7f8c8d"],nameSplit=String(name).split(''),initials,charIndex,colourIndex,canvas,context,dataURI;if(nameSplit.length==1){initials=nameSplit[0]?nameSplit[0].charAt(0):'?';}else{initials=nameSplit[0].charAt(0)+nameSplit[1].charAt(0);}//上面对名字进行一系列处理，下面找到绘图元素varcanvas=document.getElementById('headImg');charIndex=(initials=='?'?72:initials.charCodeAt(0))-64;colourIndex=charIndex%20;//图像大小canvas.width=size;canvas.height=size;context=canvas.getContext("2d");//图像背景颜色context.fillStyle=color?color:colours[colourIndex-1];context.fillRect(0,0,canvas.width,canvas.height);//字体大小context.font=Math.round(canvas.width/2)+"px'MicrosoftYahei'";context.textAlign="center";//字体颜色context.fillStyle="#FFF";绘制位置context.fillText(initials,size/2,size/1.5);//显示图像$('.headImg').attr('src',canvas.toDataURL("image/png"));};</script>实现过程我已经给每一步都注释了中文，没注释的都是特别简单，一看就知道的，想要什么效果自己改改就OK了。复制上面的代码保存为HTML网页文件看看效果吧！
