下载鸥 > 网站下载 > 开发教程 > 前端开发

jQuery动态生成字母头像

467 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

有帮助,很赞!

信息来源:精准像素
导出教程 下载word版教程
发表评论 共有条评论
关于前端开发


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

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

推荐前端开发开发教程
通过原生的JS实现点击复制效果
通过原生的JS实现点击复制效果

对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...

1 394
JS验证手机是否11位的做法
JS验证手机是否11位的做法

在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...

1 389
jQuery怎样监听鼠标滚动是向上还是向下的状态?
jQuery怎样监听鼠标滚动是向上还是向下的状态?

知乎鼠标向下滚动显示文章标题,向上滚动显示栏目;又或者向下滚动到底部时异步...

0 521
Superslide响应式页面直接应用手机端技巧介绍
Superslide响应式页面直接应用手机端技巧介绍

如果是响应式网站,那么用superslide做轮播图需要做两个,这无疑是非常不方便的...

1 423
swiper轮播图空白案例记录
swiper轮播图空白案例记录

今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...

0 345
jQuery监听点击事件弹出关注二维码教程
jQuery监听点击事件弹出关注二维码教程

通过jQuery实现点击关注按钮弹出二维码是一个比较常用的功能,今天鸥哥讲讲这...

0 445
js点击追加信息到textarea
js点击追加信息到textarea

通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...

0 536
JS判断苹果iPhone与iPad、安卓设备类型适配
JS判断苹果iPhone与iPad、安卓设备类型适配

在网站开发的过程中,一些涉及到资源下载的网站会通过判断不同系统手机来展示...

3 626
推荐插件
帝国cms访问统计ip地址链接与封禁插件下载
帝国cms访问统计ip地址链接与封禁插件下载

下载鸥开发了这款帝国cms封禁ip插件,自动记录访问情况,让我们可以更快的识别...

0 936
帝国cms联想词搜索高级搜索插件下载
帝国cms联想词搜索高级搜索插件下载

帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...

0 668
帝国cms自动生成文章新闻目录插件下载
帝国cms自动生成文章新闻目录插件下载

用户体验是我们的需求,百度蜘蛛的认可更是我们的需求。毕竟,没有收录排名,何来...

0 1045
帝国CMS内网用户静态站点文章访客统计插件
帝国CMS内网用户静态站点文章访客统计插件

本插件适用于内网用户,可查看单篇文章访问者ip地址。如果添加访问者ip组,可查...

0 496
帝国cms批量添加后台用户插件
帝国cms批量添加后台用户插件

使用帝国cms的企业用户、新闻资讯类站点的用户很多,此类站点很多时候需要有...

0 664
帝国cms多栏目多数据表自动审核推送插件
帝国cms多栏目多数据表自动审核推送插件

本插件基于帝国cms帝国cms每日自动审核插件,在自动审核指定条数信息的基础上...

0 850
帝国cms在线考试系统模板插件
帝国cms在线考试系统模板插件

一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...

0 1219
帝国cms智能自动审核按星期几审核指定栏目带推送插件
帝国cms智能自动审核按星期几审核指定栏目带推送插件

采集站的必备资源是自动审核,要做到日收录也离不开定时发布。而本插件的自动...

0 1199
客服QQ:341553759
扫码咨询 常见问题 >
官方交流群:90432500
点击加入