3 476 2020-11-25 10:17:24
收藏各种网站上,什么样的头像都有,可爱风、高冷风、卡通风、商务风。但这都是有追求的用户。而对于比较随意的用户,各种各样的头像就显得挺花哨的。
本文制作的头像主要原理是通过JavaScript根据文字动态绘制图像,比较简单,代码比较少只有几行,使用起来挺方便的。
首先需要一个简单的容器,用来装头像数据,先写个简单的网页结构。
<!DOCTYPE html><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metacontent="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"name="viewport"><title></title>//引入jQuery<scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script></head><body>//图像显示容器,使用css控制样式,这里我写的圆形<imgsrc=""style="border-radius: 50%;"class="img-circle headImg"alt="User Image">//绘图元素<canvasid="headImg"style="display:none"></canvas><scripttype="text/javascript">//js核心代码</script></body></html>js代码如下:<scripttype="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页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中。
在网站表单提交前,我们往往需要验证一下信息避免错误数据,那么,怎样验证手机号...
jQuery是一个相当好用的js插件,通过jquery我们可以实现很多功能,例如今天要介...
在通过jQuery做数据交互时我们可能存在这样的需求:通过点击按钮清空ul里的li...
分享一段js原生点击复制data-*属性的源码,根据onclick事件触发,复制当前元素...
今天鸥哥在用swiper做轮播图时,轮播效果虽然没问题,但只显示第一张,后面的图片...
通过灵活运用js,我们可以轻松实现点击追加相关信息到textarea的功能。这个功...
dplayer和ckplayer都是非常流行的web视频播放器,二者都占有相当大的用户市场...
在很多网站中,图片的默认路径是相对于根目录的绝对路径,如果是其他站点引用,则...
使用帝国cms的企业用户、新闻资讯类站点的用户很多,此类站点很多时候需要有...
百度开放了系列AI功能api如图像上色、图像去雾、图像修复、无损放大、清晰...
帝国CMS自带的搜索功能虽然强大,但也有很强的局限性 -- 必须关键词完全匹配...
通过本插件,可以实现帝国cms网站对接百度云api实现图像无损放大的功能。经过...
通过本插件,可以实现帝国cms网站对接百度云api实现图像去雾的功能。经过实际...
一直没看到好用的帝国cms在线考试插件,所以自己开发了一款。在线考试插件用...
许多网站会做一些小功能小插件给客户使用以增强用户黏性,比如图片转文字,这种...
通过本插件,可以实现帝国cms网站对接百度云api实现图像清晰度增强的功能。经...