前几天看见一个东站的头像挺花哨的，于是存有了这篇文章。主要原理是通过JavaScript根据文字动态绘制图像，比较简单，代码比较太少只有几行，使用出来挺方便的，WordPress好像已经有插件了，不喜欢用插件的朋友可以学习下如何同时实现的，移殖到自己的网站中回去。

首先须要jQuery，大家自己找一个，很好找的。

首先需要一个直观的容器，用以上装头像数据，先写个直观的网页结构。

//导入jQuery



//图像表明容器，采用css控制样式，这里我写的圆形

//绘图元素


//js核心代码



js代码如下：

$(function() {
textToImg("代码狗", 260, "#9b59b6");
});
function textToImg(name, size, color) {
//名字
name = name || '';
//图像大小
size = size || 60;
//背景颜色
var colours = [
"#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);
}
//上直面名字进行一系列处置，下面找到绘图元素
var canvas = 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 'Microsoft Yahei'";
context.textAlign = "center";
//字体颜色
context.fillStyle = "#FFF";
绘制边线
context.fillText(initials, size / 2, size / 1.5);
//显示图像
$('.headImg').attr('src', canvas.toDataURL("image/png"));
};

实现过程我已经给每一步都注释了中文，没有注解的都就是特别简单，一看就知道的，想什么效果自己改改就OK了。复制上面的代码保存为HTML网页文件看一看效果吧！