经常在一些网站上观察到,刚注册的用户未修改头像时,通常使用默认的头像。当网站比较正式比如:google等等会使用暱称首字或者名字作为头像。这样简单的图片生成,直接使用前端语言随机生成给服务器减负、非常高效。
孝顺的我立马给爸爸生成一个头像,双十一快来了,请爸爸眷顾我 !
那么怎么使用canvas来完成呢?
首先建立一个展示页面:
```java
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据用户名生成头像</title>
<script src="js/main.js"></script>
</head>
<body>
<img src="" style="border-radius: 50%;" id="userAvatar">
<canvas id="avatarCanvas" style="display:none"></canvas>
</body>
<script type="text/javascript">
var username = "马";
generatorAvator(username,60,null,"avatarCanvas","userAvatar");
</script>
</html>
generatorAvator是生成头像的主要函数,参数包括:用户名,头像大小,头像canvas,头像展示容器。
js代码如下:
/**
* usernmae : 用户名 默认为无
* size :头像大小 默认为 30
* color :字体颜色
* canvasId :canvas容器的id
* */
function generatorAvator(username,size,bgcolor,canvasId,avatarContainerId){
//设置头像暱称,如果为null或者为空时,设置为无
var nickname = username==null?"无":username==""?"无":username;
//设置头像大小
var avatarSize = size==null?30:size;
//设置头像内部文字大小
var fontSize = size==null?12:avatarSize/2;
//设置头像内部字体
var fontWeight = 'normal';
//设置头像背景颜色
var colors = [
"#31bc9f", "#33cc70", "#4a94db", "#9b5fb6", "#34495e", "#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50",
"#f1cb1e", "#e6761b", "#e7363b", "#00bcd4", "#95a5a6", "#f39c12", "#d35400", "#c0392b", "#bdc3c7", "#7f8c8d"
];
var avatarColor = bgcolor==null?colors[Math.floor((Math.random()*colors.length))]:bgcolor==""?bgcolor:colors[Math.floor((Math.random()*colors.length))];
/*根据id获取canvas
* 如果为空,则创建新的canvas
* */
var canvas = document.getElementById(canvasId);
if(canvas){
canvas.remove();
}else{
var newcanvas = "<canvas id='"+canvasId+"' style='display:none'></canvas>";
document.getElementsByName("body").append(newcanvas);
canvas = document.getElementById(canvasId);
}
//初始化canvas设置
canvas.width = avatarSize;
canvas.height = avatarSize;
var context = canvas.getContext('2d');
//头像背景颜色设置
context.fillStyle = avatarColor;
context.fillRect(0, 0, canvas.width, canvas.height);
//头像字体颜色设置
context.fillStyle = '#FFFFFF';
context.font = fontWeight + ' ' + fontSize + 'px sans-serif';
context.textAlign = 'center';
context.textBaseline="middle";
console.log(avatarSize/2-fontSize/2);
console.log(avatarSize/2);
context.fillText(nickname.charAt(0), fontSize, fontSize);
document.getElementById(avatarContainerId).src = canvas.toDataURL("image/png");
}
总结:
1.获取到canvas容器,然后得到context
2.设置画笔,画出背景。
3.然后设置文字的样式,居中以及颜色,画到canvas
4.将canvas中的图画转为url填充到img的src中便可以展示。
参考:
https://hacpai.com/article/1505355093354