领导要求页面整改,头像生产工具是首要的,然后开始说非要图片的,用h5,svg,canvas之类的做,
参考地址:GitHub - joaner/namedavatar: SVG Avatar generated by name text
但是我觉得太繁琐了,而且不可控,比如font-size,text-shadow,font-weight都用不上,最后自己想了下觉得很容易实现
效果如下:
代码简单直接贴出来了,
css:
.nameImage {
/*box-shadow: 0px 0px 0px 1px #ddd inset;*/
text-shadow: 0 1px #aaa;
box-shadow: 0px 0px 1px 0.8px #ddd inset;
cursor: pointer;
flex: 1 1 auto;
width: 47px;
height: 43px;
line-height: 43px;
border-radius: 50%;
display: inline-block;
font-weight: 600;
color: #fff;
font-size: 18px;
text-align: center;
box-sizing: border-box;
font-family: Microsoft Yahei;
}
html :
<div id="name"></div>
<input type="text" id="nameinput" />
<button onclick="crateImage()">生成</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
let names;
let crateImage = function () {
let colorpage = [
"#f29f81","#5bc1ef","#c289ce","#f4ce5b","#cccf80"
];
let index = Math.floor((Math.random()*colorpage.length));
names = $("#nameinput").val();
//console.log(names.length);
//names =names.slice(-2);
let div = `<div class="nameImage" style="background:${colorpage[index]}";>${names.slice(-2)}</div>`;
$("#name").html(div);
}
</script>
值得吐槽的是,我们系统有个管理员角色,画风是这样的
和领导确认,管理员没特权,就叫理员- -