js 首字母转头像 「字符串转图片」
发布时间：2018-05-15作者：laosun阅读（3749）
直接上代码吧
function textToImg(str) {
var name, fsize;
if (str.length < 2) {
name = str;
fsize = 60
} else {
if (str.length == 2) {
name = str.substring(0, str.length);
fsize = 45
} else {
if (str.length == 3) {
name = str.substring(0, str.length);
fsize = 30
} else {
if (str.length == 4) {
name = str.substring(0, str.length);
fsize = 25
} else {
if (str.length > 4) {
name = str.substring(0, 2);
fsize = 45
}
}
}
}
}
var fontSize = 60;
var fontWeight = "bold";
var canvas = document.getElementById("head_canvas_default");
var img1 = document.getElementById("head_canvas_default");
canvas.width = 120;
canvas.height = 120;
var context = canvas.getContext("2d");
context.fillStyle = getBG();
context.fillRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "#FFF";
context.font = fontWeight + " " + fsize + "px sans-serif";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(name, fontSize, fontSize);
return canvas.toDataURL("image/png")
}
function getBG() {
var bgArray = [ "#1abc9c", "#2ecc71", "#3498db", "#9b59b6", "#34495e",
"#16a085", "#27ae60", "#2980b9", "#8e44ad", "#2c3e50", "#f1c40f",
"#e67e22", "#e74c3c", "#eca0f1", "#95a5a6", "#f39c12", "#d35400",
"#c0392b", "#bdc3c7", "#7f8c8d" ];
var color = bgArray[Math.floor(Math.random() * bgArray.length)];
return color
};
调用：
var str = '技术客'; var avatar = textToImg(str); <img class="avatar" src="' + avatar + '" />
效果图：
3 +1
版权属于: 技术客
原文地址: https://www.sunjs.com/article/detail/fd4060a4ad62491eaa4a05010a15f8b1.html
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
关键字： 前端 源码 javascript
共 0 条评论