js教程

jQuery动态生成字母头像

我的站长站 2020-08-31 人阅读

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

jQuery动态生成字母头像

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

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

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

相关推荐
  • jquery教程
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file宽高的代码如下,仅在火狐中测试了,其他浏览器兼容性未知。var _URL = window.URL || window.webkitURL;$("#file").change(function (e) { var file, img; if ((file = this.files[0])) { img = new Image(); img.onload = func...

    js教程 128 5年前
  • Jquery实战视频教程 6小时精通Jq
    Jquery实战视频教程 6小时精通Jq

    Jquery实战视频教程 6小时精通Jq,实现小应用,附带教程源码。视频教程列表第7章 自动以Alert第6章 标记完成状态、定时提醒第5章 Task详情第4章 添加及查看Task第3章 细节完善第2章 整体布局第1章 ...

    视频教程 119 4年前
  • JQuery鼠标移动添加删除样式

    JQuery鼠标移动添加删除样式方法,下面为代码案列$("a").hover(function(){ $(this).find("b").show();},function(){ $(this).find("b").hide();})鼠标移到A标签触发事件,下面的B标签显示,后门的function就是鼠标移开隐藏。...

    js教程 109 4年前
最新更新
  • js返回上一页、刷新页面代码大全

    返回上一页代码:<a href="javascript:history.go(-1)">返回上一页</a>onclick返回上一页代码:<a href="javasc...

    js教程 2天前
  • js语言!=与!==的区别

    != (不等于)!= 是松散的不等于运算符。它在比较两个值时,会先进行类型转换(type coercion),然后再比较值是否不...

    js教程 6天前
  • JS防止网站被扒的解决方法

    这个代码能够直接保护整个站,而不再是单个页面,直接把代码放到自己的网站上,如果是博客建议放到header.php头部...

    js教程 3周前
  • Hexo插件开发实战教程

    Hexo的插件嵌入有两种方式,一种是通过脚本(Scripts)的方式引入,一种是通过插件(Packages)的方式将自定义的插件内...

    js教程 1个月前
  • JavaScript定时删除指定元素方法

    JavaScript定时删除指定元素一般用到自动隐藏的效果功能上面,主要用到了JS的setTimeout语法。下面是一个定时...

    js教程 1个月前