js 首字母转头像 「字符串转图片」

发布时间:2018-05-15作者:laosun阅读(986)

js

    直接上代码吧

    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 + '" />

    效果图:

    image.png

2 +1

版权声明

 前端  源码  javascript

 请文明留言

0 条评论