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

mengkun 7,996 54

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

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

码云上的字符头像

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

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

在线演示 原版地址

WordPress 插件版

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

Github 地址 直链下载

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

广告

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

  1. bulewell
    bulewell Lv 1

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

  2. Steven
    Steven Lv 1

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

    • mengkun
      mengkun 站长

      @Steven主题中必须使用 get_avatar() 函数获取头像并指定了 alt 参数才能有效使用本插件。
      如果用不了,可以试试这款 https://wordpress.org/plugins/wp-first-letter-avatar/

      • Steven
        Steven Lv 1

        @mengkun这款插件也试过,没达到效果呢。而且能不用插件最好,这样安全点,毕竟wordpress出现过插件导致站点被黑的情况呢。

      • Steven
        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呢。望指点,谢谢。

      • M9
        M9 Lv 1

        @Steven我也碰到这个东东。。。

        $avatar = $user_email ? get_avatar( $user_email, 48 ) : get_avatar( 0, 48 );

        。。。。无解

      • Steven
        Steven Lv 1

        @M9我也放弃了,暂时不玩这个了。

  3. Cai
    Cai Lv 2

    收藏一下.

  4. ★
    Lv 1

    试试,哈哈

  5. ●
    Lv 1

    试试

  6. 爱捕鱼
    爱捕鱼 Lv 1

    我试试头像

  7. 魔王の博客

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

分享
微信
微博
QQ