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

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

码云上的字符头像

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

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

WordPress 插件版

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

Github 地址直链下载

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

本文作者为mengkun，转载请注明。

js 前端头像

/* ================================================== 调用ssl 头像链接 ================================================== */ function get_ssl_avatar($avatar) { if (is_admin()) { $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar, 0); } else { $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar); } return $avatar; } if (cs_get_option('i_function_avatar_ssl_switcher')) { add_filter('get_avatar', 'get_ssl_avatar'); }

发表评论取消回复

无不为 Lv 1

不错的代码，从中学到不少知识。

#57 2023-03-19 21:44 回复
7+6 Lv 1

能出个API嘛 QwQ

#56 2022-12-28 17:57 回复
wrgwrf Lv 1

会报错啊

#55 2022-05-05 18:47 回复
主函数 Lv 1

老哥，你的这个头像是怎么缓存到本地的，可以讲解一下吗？

#54 2021-05-25 17:00 回复
☭ Lv 1

反馈一下bug：
1. 在文章页最近评论哪儿，获取的头像是错误的，并且显示的名字也是错误的。
2. 改为输出404哪儿，要等好一会儿确定加载失败才会显示头像。

#53 2021-05-06 23:12 回复
☭ Lv 1

github打不开，墙了。[aru_16]

#52 2021-05-06 22:06 回复
- ☭ Lv 1
  
  @☭用迅雷下载了[aru_22]
  
  2021-05-06 23:08 回复
☭ Lv 1

建议推送到wordpress官网啊[aru_12]

#51 2021-05-06 14:58 回复
小学兔 Lv 2

牛[aru_147]

#50 2021-04-22 11:46 回复
woniutv Lv 1

大神我使用得主题不适用还请指教指教哇
主题名：TOB主题
如果需要我可以把主题传给你~ 多谢啦

#49 2021-01-30 11:05 回复
且听风吟 Lv 1

怎末切换到圆角的呢，没找到方法博主指点一下[aru_24]

#48 2021-01-22 11:28 回复
- mengkun 站长
  @且听风吟
  
  border-radius: 50%;
  2021-01-23 14:25 回复
  - 且听风吟 Lv 1
    
    @mengkun谢谢解决了[aru_53]
    
    2021-02-20 12:18 回复
猫猫 Lv 1

！！给我发现个什么宝藏博客！阿~爱了

#47 2021-01-20 02:49 回复
猫小柳同学 Lv 1

哇，，从头像进来的，这个评论我真的是爱了

#46 2021-01-04 11:11 回复
绿软吧(lvr8) Lv 1

貌似无法在我主题实现！估计我得改改获取方式才能使用上

#45 2020-11-26 07:40 回复
Q.fon Lv 1

很棒的插件，我已经用上啦！[aru_55] 5iT.top我爱淘

#44 2020-06-10 18:56 回复
chen Lv 1

博主好，知更鸟主题首页的留言显示字母头像不正常，统一展示的只显示个“头”字，内页正常，另外管理员的自定义图片头像不显示，只显示字母头像。谢谢请指点，万分感谢。

#43 2020-04-19 13:44 回复
- mengkun 站长
  
  @chen我手头没有知更鸟的主题，无法进行测试。你可以试试这个插件是否能正常使用： https://wordpress.org/plugins/wp-initials-avatar/
  
  2020-04-20 12:42 回复
  - chen Lv 1
    
    @mengkun你好博主，你推荐的initials-avatar 这个插件安装后没法正常使用的[大哭]
    
    2020-04-20 14:08 回复
梦回故里 Lv 1

赞一个，我也要把评论用上这个，嘻嘻[aru_3]

#42 2020-04-03 09:14 回复
bohanjun Lv 1

所以我的头像是一个` b`对吧

#41 2020-04-02 11:26 回复
宗 Lv 1

知更鸟 5.4版本使用后，首页调用评论都统一显示“头”字的头像。评论页面显示头像正常，管理头像也无法使用自定义头像。如方便情况，请楼主指点，万分感谢。

#40 2020-04-01 13:27 回复
蓝皮叔 Lv 1

使用这个后台评论的头像都显示正常，但是前台都不显示，是空白的，不知道什么原因哦，哪位高手知道呢，指点下谢谢

#39 2020-03-25 12:36 回复
mengkun 站长

mk-letter-avatar 插件 v1.1.0 更新：
- 优化代码，适配更多主题
- 支持在后台也显示字母头像
+++++++++++++++++++++
应该大部分主题都能正常使用本插件了。如果您的主题在启用插件后没效果，可以留言备注主题名称及网址，以便于进行问题诊断！[aru_12]

#38 2020-02-26 21:43 回复
- ddasd企鹅舞 Lv 1
  
  @mengkun 查看图片
  这个怎么去掉呢？
  
  2020-02-28 18:53 回复
牛 Lv 1

牛人哎呀

#37 2019-09-24 09:52 回复
bulewell Lv 1

查看图片
 查看图片
博主好，知更鸟主题mk字母头像展示异常，方便邮箱协助下吗？
WordPress 5.2.1
知更鸟 5.2
评论插件 wpDiscuz

#36 2019-07-14 18:59 回复
Steven Lv 1

请问为啥使用的wp主题上传插件并开启后无效果呢？我只看到function.php中使用了get_ssl_avatar来获取头像呢。望指点，谢谢。

#35 2019-07-04 14:17 回复
- mengkun 站长
  
  @Steven主题中必须使用 get_avatar() 函数获取头像并指定了 alt 参数才能有效使用本插件。
  如果用不了，可以试试这款 https://wordpress.org/plugins/wp-first-letter-avatar/
  
  2019-07-04 19:25 回复
  - Steven Lv 1
    
    @mengkun这款插件也试过，没达到效果呢。而且能不用插件最好，这样安全点，毕竟wordpress出现过插件导致站点被黑的情况呢。
    
    2019-07-04 21:56 回复
  - Steven Lv 1
    
    @mengkun
    
    /* ================================================== 调用ssl 头像链接 ================================================== */ function get_ssl_avatar($avatar) { if (is_admin()) { $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar, 0); } else { $avatar = preg_replace('/.*\/avatar\/(.*)\?s=([\d]+)&.*/','<img src="https://secure.gravatar.com/avatar/$1?s=$2" class="avatar avatar-$2" height="$2" width="$2">',$avatar); } return $avatar; } if (cs_get_option('i_function_avatar_ssl_switcher')) { add_filter('get_avatar', 'get_ssl_avatar'); }
    
    看了一圈只看到使用了这个来获取头像，其他地方都基本调用get_avatar呢。望指点，谢谢。
    
    2019-07-04 22:17 回复
  - M9 Lv 1
    
    @Steven我也碰到这个东东。。。
    
    $avatar = $user_email ? get_avatar( $user_email, 48 ) : get_avatar( 0, 48 );
    
    。。。。无解
    
    2019-07-06 21:05 回复
  - Steven Lv 1
    
    @M9我也放弃了，暂时不玩这个了。
    
    2019-07-09 14:03 回复
  - freeflk Lv 1
    
    @Steven楼主的插件文件mk-letter-avatar.php 34行内容：
    
    $src = preg_replace('/[\?\&]d[^&]+/is', '&d=404', $src);
    
    实质是让默认头像失效，但是目前get_avatar中获取的src结构是‘？s=’，所以插件原来的正则匹配不到，即便你用get_avatar获取头像插件也不会生效。两种办法处理：
    1、把上述代码中正则重新修正；
    2、暴力办法把34行内容直接改为
    
    $src = '#';
    
    目的就是让默认头像地址失效，然后就可以了[aru_1]
    
    2019-11-20 10:02 回复
Cai Lv 2

收藏一下.

#34 2019-06-17 03:08 回复
★ Lv 1

试试，哈哈

#33 2019-06-13 14:18 回复
● Lv 1

试试

#32 2019-06-13 14:17 回复
爱捕鱼 Lv 1

我试试头像

#31 2019-06-04 00:32 回复
魔王の博客 Lv 1

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

#30 2019-06-02 23:05 回复