3 406 2020-11-25 10:17:24
收藏各种网站上,什么样的头像都有,可爱风、高冷风、卡通风、商务风。但这都是有追求的用户。而对于比较随意的用户,各种各样的头像就显得挺花哨的。
本文制作的头像主要原理是通过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网站建设与开发业务或插件定制,请联系右侧在线客服。我们能给您的,就是高质量的模板与售后。
标注了信息来源为下载鸥的文章皆为原创,如果是转载的优质文章,我们也都标注了出处。如果您喜欢我们的文章,请按照下载鸥所标注的文章出处进行标注,谢谢您的配合。
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如函数式编程)风格。
JavaScript十分强大,不管是前端页面开发、视觉动态渲染、数据交互还是后端逻辑处理,都可以通过JS实现。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。
在各种盛大的节日、活动前,网站制作倒计时特效可有效给活动页引流。那么,怎样...
对于网站、app开发等工作而言,复制是一个非常常见的功能。很多人到处找插件...
在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...
在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...
我们常用$(window).height() 和 $(document).height()来监听当前高度,但这个...
今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...
我们在文章输入框中经常有用到字数控制,但字数控制有两种方案,一种是字母/空...
在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...
淘宝电话手机号归属地API查询接口...
Chrome是目前最好用的浏览器,写的网页时可以利用Chrome轻松找到对应的js动作...
修改上面的.tags为你的div选择器就可以了,这里是利用rand随机的透明度,你也可...
JQuery循环过滤空格+限制字数方法,常用来处理AJAX返回的数据种,非常常用。...
Tala Security今天发布的一份web安全报告显示,全球Web安全状况急剧恶化,99%的...
在写JS时,我们在处理动态生成的HTML触发事件时,会无效。那么,动态生成元素触发...
在JQuery中倍数索引其实跟CSS中的方法是一样的,而且标签语法也是一样的,都是...
.getScript可以让当前JS中加载运行另一个JS文件,使用 AJAX 请求,获取和运行 J...