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

mengkun 6,020 44

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

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

码云上的字符头像

以前知道 WordPress 有一款插件 WP First Letter Avatar 能实现类似的功能,但采用的是 php 在后端生成头像,使用起来不是很灵活。

仔细研究了码云的前端代码,发现它使用的是一个叫 LetterAvatar 的 JS 插件。它的原理是利用动态创建的 canvas 生成图像,然后显示在 img 标签中。具体的代码以及调用示例可以直接看下面的在线演示:[aru_47]

在线演示 原版地址

WordPress 插件版

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

Github 地址 直链下载

↑↑↑ 最后,别忘了帮忙点个 star 哦~[aru_12]

打赏
发表评论 取消回复
表情 图片 链接 代码

  1. Cai
    Cai Lv 2

    收藏一下.

  2. ★
    Lv 1

    试试,哈哈

  3. ●
    Lv 1

    试试

  4. 爱捕鱼
    爱捕鱼 Lv 1

    我试试头像

  5. 魔王の博客

    确实好用啊,虽然没人来我博客哭[aru_15],还是用qq拉取头像昵称的吧[aru_25]

分享
微信
微博
QQ