jQuery动态生成字母头像

3 494 2020-11-25 10:17:24

简述

本文制作的头像主要原理是通过JavaScript根据文字动态绘制图像，比较简单，代码比较少只有几行，使用起来挺方便的。

各种网站上，什么样的头像都有，可爱风、高冷风、卡通风、商务风。但这都是有追求的用户。而对于比较随意的用户，各种各样的头像就显得挺花哨的。

本文制作的头像主要原理是通过JavaScript根据文字动态绘制图像，比较简单，代码比较少只有几行，使用起来挺方便的。

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

<!DOCTYPE html>
<html>
<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网页文件看看效果吧！

本文地址：https://xzo.com.cn/develop/js/333.html

有帮助，很赞！

信息来源：精准像素

业务合作

如果您认可我们的分享，有意与我们合作开展帝国cms网站建设与开发业务或插件定制，请联系右侧在线客服。我们能给您的，就是高质量的模板与售后。

版权声明

标注了信息来源为下载鸥的文章皆为原创，如果是转载的优质文章，我们也都标注了出处。如果您喜欢我们的文章，请按照下载鸥所标注的文章出处进行标注，谢谢您的配合。

信息标签

随机

随机图

JS/JQuery在线预览excel文档插件（JQuery免下载预览） dplayer.js播放器始终无法生效的原因分享一段帝国CMS高效随机调用代码函数帝国cms选择外表关联字段去除唯一数据改为追加给网站加一个复制提示窗口JS代码 js调用/获取当前页面链接与参数的方法 JQuery循环过滤空格+限制字数方法 js的fetch函数怎么用？ Ajax请求如何带上Cookie js怎样判断现在是早上中午还是晚上 js点击追加信息到textarea js中定义变量加var和不加var的区别 js判断windows操作系统还是mac os系统怎样给网站/博客添加年味十足的灯笼特效？ JS怎样做距离2020过年倒计时？ js手机端浏览pc端页面自动跳转手机站的方法 10位数的时间戳和13位数的时间戳获取方式与转换 PHP随机输出一句话文字代码本地储存window.localStorage使用方法 QQ情侣头像API接口代码

导出教程下载word版教程

关于前端开发

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript十分强大，不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理，都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

js判断windows操作系统还是mac os系统

js网站视频播放器ckplayer和dplayer优缺点分析

禁止指定城市/省份IP访问JS代码