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

mengkun 52.4K 82

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

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

码云上的字符头像

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

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

在线演示 原版地址

WordPress 插件版

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

Github 地址 直链下载

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

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

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

  1. 夜影小窝
    夜影小窝 Lv 1

    git主题启用了也不行，能看看怎么回事吗？

    #30 2019-05-29 17:27 回复
  2. 呵呵
    呵呵 Lv 1

    呵呵

    #29 2019-05-27 21:53 回复
  3. 乐乐
    乐乐 Lv 1

    这个评论也是

    #28 2019-05-26 17:09 回复
  4. 夜影小窝
    夜影小窝 Lv 1

    git主题启用了也行，呵呵

    #27 2019-05-17 17:26 回复
  5. 火钳刘明
    火钳刘明 Lv 1

    看看效果

    #26 2019-05-16 18:25 回复
  6. AEMOM
    AEMOM Lv 1

    厉害了这插件 贼爽，测试了在dux主题失效流泪（默认主题wordstar也是）...

    #25 2019-05-14 20:04 回复
    • 笨孩纸
      笨孩纸 Lv 1

      @AEMOMdux主题用不了

      2019-05-15 16:05 回复
      • AEMOM
        AEMOM Lv 1

        @笨孩纸哈哈斜眼笑稍微改下DUX主题就可以用了！只是访客读者墙还不知如何改调用小纠结

        2019-07-02 08:52 回复
      • Steven
        Steven Lv 1

        @AEMOM请问怎么修改的呢？求指点

        2019-07-04 16:43 回复
      • AEMOM
        AEMOM Lv 1

        @Steven我看到知更鸟的能用便拿来参考改！把头像改为根据评论者来调用get_avatar( $comment, 64, '', get_comment_author() ); 然后本身我也同时用了zm-first-letter-avatar插件，里面也有alt可能就刚好匹配吧托腮。

        2019-07-10 19:33 回复
  7. 四驱牛牛
    四驱牛牛 Lv 1

    已star

    #24 2019-05-08 09:43 回复
  8. 职业群主
    职业群主 Lv 1

    以前用的默认头像，有时就会出现无法显示的情况 这个解决方案好

    #23 2019-04-24 14:34 回复
  9. 使用 LetterAvatar 实现纯前端生成字母头像-CPMan.Studio
    使用 LetterAvatar 实现纯前端生成字母头像-CPMan.Studio Pingback

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

    #22 2019-04-22 00:30 回复
  10. 和拖鞋
    和拖鞋 Lv 1

    测试头像

    #21 2019-04-19 10:18 回复
  11. 爱猫的男孩
    爱猫的男孩 Lv 1

    感觉可以把流言墙的样式弄成这样的，比正方形好看。哈哈滑稽

    #20 2019-04-07 21:46 回复
  12. Time丨Brand
    Time丨Brand Lv 1

    欢迎留言，广告绕道。随缘回复！ →_→

    #19 2019-04-07 18:49 回复
    • mengkun
      mengkun 站长

      @Time丨Brand欢迎留言，广告绕道。随缘回复！ →_→

      2019-04-07 18:53 回复
  13. Kengwang
    Kengwang Lv 1

    哈，这个功能搞得好！一堆懒得设头像的人的福音

    #18 2019-04-05 16:59 回复
  14. crasp
    crasp Lv 1

    这个头像溜得很

    #17 2019-04-04 09:45 回复
  15. Pony Ma
    Pony Ma Lv 1

    你好，欢迎来腾讯上班！

    #16 2019-04-03 14:12 回复
  16. SaoDaye
    SaoDaye Lv 1

    ？！？！？好像大佬你网站评论也有点问题，我没重复提交，也提示 频率过快。。

    啊对了。插件启用了，貌似也没有生效。。。

    #15 2019-04-02 17:24 回复
    • mengkun
      mengkun 站长

      @SaoDaye你明明……重复提交了……
      启用了但没生效可能是因为你的主题的头像输出不是使用的 wp 标准函数 get_avatar()

      2019-04-02 17:55 回复
  17. SaoDaye
    SaoDaye Lv 1

    谢谢大佬。但启用插件后，似乎没有生效。

    #14 2019-04-02 17:23 回复
  18. ‍♀️12
    ‍♀️12 Lv 1

    测试头像

    #13 2019-04-02 10:40 回复
    • mengkun
      mengkun 站长

      @‍♀️12emoji 没办法绘制在 canvas 上……还有……这个头像很绿斜眼笑

      2019-04-02 17:56 回复
  19. 龙笑天
    龙笑天 Lv 3

    评论框下面的这个微博图床又挂了...

    #12 2019-03-30 20:53 回复
    • mengkun
      mengkun 站长

      @龙笑天自己建一个图床的 API 吧呲牙

      2019-03-31 10:47 回复
      • 龙笑天
        龙笑天 Lv 3

        @mengkun改用loli图床了啊~

        2019-04-01 20:22 回复
  20. 不朽千秋
    不朽千秋 Lv 1

    这将解决不会设置头像的评论者一大福音

    #11 2019-03-30 17:08 回复
  21. 阿仁
    阿仁 Lv 1

    占楼

    #10 2019-03-30 14:03 回复
  22. 杨小杰博客
    杨小杰博客 Lv 3

    连头像都没有，如何服众

    #9 2019-03-29 13:36 回复
  23. 野人
    野人 Lv 2

    坤坤，太优秀了吧，头像太好看了

    #8 2019-03-29 11:05 回复
  24. 洒洒水
    洒洒水 Lv 1

    可以可以

    #7 2019-03-29 10:34 回复
  25. 李大锤
    李大锤 Lv 1

    滴~看头像

    #6 2019-03-28 11:24 回复
  26. 尹华峰博客
    尹华峰博客 Lv 1

    很nice

    #5 2019-03-27 17:20 回复
  27. 腾讯视频
    腾讯视频 Lv 1

    震惊！！

    #4 2019-03-27 16:03 回复
  28. 杰新博客
    杰新博客 Lv 3

    占楼

    地板 2019-03-27 06:51 回复
  29. 完美者
    完美者 Lv 5

    我是不是用不上这个？

    板凳 2019-03-26 23:57 回复
  30. 完美者
    完美者 Lv 5

    随缘占楼

    沙发 2019-03-26 23:56 回复