当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

JavaScript动态生成文字头像

好久没写网站相关教程了,主要是没得写。前几天看到一个站的头像挺花哨的,于是有了这篇文章。主要原理是通过JavaScript根据文字动态绘制图像,比较简单,代码比较少只有几行,使用起来挺方便的,WordPress好像已经有插件了,不喜欢用插件的朋友可以学习下如何实现的,移植到自己的网站中去。

JavaScript动态生成文字头像

JavaScript动态生成文字头像

首先需要jQuery,大家自己找一个,很好找的。

首先需要一个简单的容器,用来装头像数据,先写个简单的网页结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title></title>
//引入jQuery
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
//图像显示容器,使用css控制样式,这里我写的圆形
    <img src="" style="border-radius: 50%;" class="img-circle headImg" alt="User Image">
//绘图元素
    <canvas id="headImg" style="display:none"></canvas>

    <script type="text/javascript">
       //js核心代码
    </script>
</body>
</html>

js代码如下:

  <script type="text/javascript">
        $(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"));
        };
    </script>

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

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝