欢迎光临
我们一直在努力
扫描二维码在手机上浏览
WordPress相关

使用 LetterAvatar 实现纯前端生成字母头像

偶然发现 @码云 上有个非常人性化的细节:会自动给没头像的用户生成一个昵称首字符的彩色头像,关键是打开控制台一看,发现这头像居然还是在前端实时生成的,这就很有意思了!

以前知道 WordPress 有一款插件 WP First Letter Avatar 能实现类似的功能,但采用的是 php 在后端生成头像,使用起来不是很灵活。
仔细研究了码云的前端代码,发现它使用的是一个叫 LetterAvatar 的 JS 插件。它的原理是利用动态创建的 canvas 生成图像,然后显示在 img 标签中。具体的代码以及调用示例可以直接看下面的在线演示:

WordPress 插件版

为了方便大家的使用,我基于该代码编写了一个 WordPress 插件,该插件会自动将评论区无头像用户的头像显示成昵称首字符的彩色头像。整个插件大小只有不到 5kb,无需任何配置,上传启用即可生效,并且不会在服务器产生任何缓存文件,纯净好用!

THE END
历史上的今天
三月
6
    哇哦~~~,历史上的今天没发表过文章哦
标签
喜欢就支持一下吧!!!
点赞0打赏分享
版权声明
本文来源于 孟坤博客 ,由 网络臭虫 2020/03/06 13:32:55 整理并发表。
本文标题:使用 LetterAvatar 实现纯前端生成字母头像
最后更新:于 2020/03/06 13:32:55 进行最后更新,如内容失效,请反馈给我们,谢谢!
本文地址: https://www.jsksky.com/using-letteravatar-to-generate-the-head-image-of-a-pure-front-end.html

网络臭虫

已发布508篇文章
吃得苦中苦,方为人上人,不卧薪藏胆,哪能苦尽甘来?点击进入我的网站了解更多有关我的信息。

评论 抢沙发

A 作者 M 管理员

评论前必须登录!

 


觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏