上篇文章《使用PHP通过svg生成base64文字首字头像》讲到了如何给昵称生成首字头像,那么如何让Gravatar头像默认为字母头像呢?(为了演示方便下文中Gravatar头像地址将使用Cravatar来演示)

Gravatar头像参数d

一般Gravatar头像地址为https://cravatar.cn/avatar/26f91984f0b683078b491fa5f28bbc70?s=40&d=mm,可以看到末尾有个d=mmmm就是其参数,参数具体如下。

404:如果没有与电子邮件哈希关联的图像,则不加载任何图像,而是返回 HTTP 404(未找到文件)响应
mm:一个简单的卡通风格的人物轮廓
identicon:一个几何图案(随机生成)
monsterid:具有不同颜色、面孔的“怪物”(随机生成)
wavatar:具有不同特征和背景的人脸(随机生成)
retro:8位色的像素人脸(随机生成)
robohash:具有不同颜色、面部的机器人(随机生成)
blank:透明的 PNG 图像(为方便演示,已为其添加了一个边框)

其实d也可以设置一个图片地址比如d=图片url,但这样设置的效率极低,同时很多国内头像源并不支持,比如Cravatar就不支持。

那么如何解决呢?

利用blank参数

其实可以利用blank参数,将默认头像设置为透明,然后再头像下面在叠加个头像上去,类似于Photoshop的图层,邮箱头像图层在上,字母头像图层在下,用户没有邮箱头像时则显示透明的默认头像,然后因为是透明的,所以咱们看到的就是字母头像了,实例代码如下:

html部分

<div class="zetx">
<img class="avatar a" src="//cravatar.cn/avatar/26f91984f0b683078b491fa5f28bbc70?s=40&d=blank" alt="Calm" width="40" height="40">
<img class="avatar b" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigyMjksMTYwLDE2NikiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q+PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgYWxpZ25tZW50LWJhc2VsaW5lPSJjZW50cmFsIj5DPC90ZXh0Pjwvc3ZnPg==" alt="Calm" width="40" height="40">
</div>

css部分

.zetx{
    position: relative;
    display: inline-block;
    z-index: 0;
}
.zetx .a{
    position: relative;
    z-index: 2;
}
.zetx .b{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

缺点

缺点就是有人的头像本身就是背景透明的png图,就会和垫底的字母或文字头像叠加。

版权属于:泽泽社长
本文链接:https://blog.zezeshe.com/archives/gravetar-avatar-letter-avatars.html
本站未注明转载的文章均为原创,并采用 CC BY-NC-SA 4.0 授权协议,转载请注明来源,谢谢!