这种文字头像其实在很多地方都有见过,之前看到的教程都是通过使用imagecreate
创建图片的形式来实现生成文字头像的,缺点就是不把图片存起来每次生成都会很慢,存起来的话,对于很多场景来说,存下来的头像被复用的可能性比较小,比如说游客评论的头像,所以有的时候需要一种能直接生成不用缓存还不怎么影响效率的方式,比如下方介绍的这种。
使用SVG来生成文字头像
代码如下:
代码语言:javascript复制/**
* 首字母头像
* @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('' . $first . '');
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 "";
代码在文章下方,原理就是,调用函数将用户名输入进去,然后使用用户名通过一些计算给svg
设置个背景色,同时提取用户名第一个文字或字母作为svg
的文字内容,最后想svg
转为base64
编码,base64
编码加上data:image/svg xml;base64,
前缀就可以当做src
被img
标签引用了,如下就是上方代码生成的svg
图片地址。
data:image/svg xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgaGVpZ2h0PSIxMDAiIHdpZHRoPSIxMDAiPjxyZWN0IGZpbGw9InJnYigxNjAsMTgzLDIyOSkiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIj48L3JlY3Q PHRleHQgeD0iNTAiIHk9IjUwIiBmb250LXNpemU9IjUwIiB0ZXh0LWNvcHk9ImZhc3QiIGZpbGw9IiNmZmZmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiIHRleHQtcmlnaHRzPSJhZG1pbiIgYWxpZ25tZW50LWJhc2VsaW5lPSJjZW50cmFsIj7ms708L3RleHQ PC9zdmc
代码转自:https://pangsuan.com/p/php_base64_avatar.html linkCard('.post-content','0');