使用PHP通过svg生成base64文字首字头像

! 04417-wj4z5o4syb.png (https://magicblue.cn/usr/uploads/2023/04/1987687837.png)
这种文字头像其实在很多地方都有见过，之前看到的教程都是通过使用imagecreate创建图片的形式来实现生成文字头像的，缺点就是不把图片存起来每次生成都会很慢，存起来的话，对于很多场景来说，存下来的头像被复用的可能性比较小，比如说游客评论的头像，所以有的时候需要一种能直接生成不用缓存还不怎么影响效率的方式，比如下方介绍的这种。
使用SVG来生成文字头像
代码如下： /** * 首字母头像 * @param $text * @return string */ function letter_avatar($text) { $total = unpack('L', hash('adler32', $text, true)) 1 ; $hue = $total % 360; list($r, $g, $b) = hsv2rgb($hue / 360, 0.3, 0.9); $bg = "rgb({$r},{$g},{$b})"; $color = "#ffffff"; $first = mb_strtoupper(mb_substr($text, 0, 1)); $src = base64_encode('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100" width="100"><rect fill="' . $bg . '" x="0" y="0" width="100" height="100"></rect><text x="50" y="50" font-size="50" text-copy="fast" fill="' . $color . '" text-anchor="middle" text-rights="admin" alignment-baseline="central">' . $first . '</text></svg>'); return 'data:image/svg+xml;base64,' . $src; } function hsv2rgb($h, $s, $v) { $r = $g = $b = 0; $i = floor($h * 6); $f = $h * 6 - $i; $p = $v * (1 - $s); $q = $v * (1 - $f * $s); $t = $v * (1 - (1 - $f) * $s); switch ($i % 6) { case 0: $r = $v; $g = $t; $b = $p; break; case 1: $r = $q; $g = $v; $b = $p; break; case 2: $r = $p; $g = $v; $b = $t; break; case 3: $r = $p; $g = $q; $b = $v; break; case 4: $r = $t; $g = $p; $b = $v; break; case 5: $r = $v; $g = $p; $b = $q; break; } return floor($r * 255), floor($g * 255), floor($b * 255) ; } echo "<img src='http://121.5.49.169/cs/index.php/lost/".letter_avatar('某某人')."' />";代码在文章下方，原理就是，调用函数将用户名输入进去，然后使用用户名通过一些计算给svg设置个背景色，同时提取用户名第一个文字或字母作为svg的文字内容，最后想svg转为base64编码，base64编码加上data:image/svg+xml;base64,前缀就可以当做src被img标签引用了,如下就是上方代码生成的svg图片地址。data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249Ij

让Gravatar头像默认为字母头像

Gravatar头像参数d
一般Gravatar头像地址为https://cravatar.cn/avatar/26f91984f0b683078b491fa5f28bbc70?s=40&d=mm，可以看到末尾有个d=mm，mm就是其参数，参数具体如下。
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; } .zetx .a{ position: relative; z-index: 2; } .zetx .b{ position: absolute; top: 0; left: 0; z-index: 1; }来源：https://blog.zezeshe.com/archives/gravetar-avatar-letter-avatars.html