创建像Google一样的动态名称头像/图标

Question

我想用名字的第一个字母创建一个徽标或个人资料头像，例如 Google。有什么方法或服务可以做到吗？

我尝试学习有关使用 php 制作图像的代码，但这太难了。有一次我找到了一个关于这个动态图像文本的网站，但我没有找到。

Answer 1

您在网上找到的最简单的示例将使用 PHP 的 imagecreate 和 imagestring 函数，例如这个：

https://phppot.com/php/how-to-convert-text-to-image-using-php/

这是我根据上面的链接编写的一个快速示例代码，它创建了一个类似于 Google 头像的图像：

$img = imagecreate(250, 250);

$textbgcolor = imagecolorallocate($img, 52, 152, 219);
$textcolor = imagecolorallocate($img, 255, 255, 255);

$txt = "AB";
$fontfile = "/arial.ttf";
imagettftext($img, 100, 0, 35, 170, $textcolor , $fontfile, $txt);
ob_start();
imagepng($img);
printf('<img src="data:image/png;base64,%s"/ width="100">', base64_encode(ob_get_clean()));

您需要将

arial.ttf

字体文件放在与 PHP 文件相同的目录中才能正常工作。

然而，在大多数美观的字体中，字母的宽度并不相同。因此，您会发现很难将文本居中，因为您不能对字谜“MM”和“II”使用相同的 X 值。我建议您使用具有扩展功能（例如将文本对齐到中间）的库，我的赌注是gd-text。

Answer 2

我用简单的方法。

你需要这个CSS，

    .avatarLetters {
        display:inline-block;
        font-style: normal;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #a466c9;
        font-size: 18px;
        font-family: Tahoma, sans-serif;
        color: #ffffff;
        text-align: center;
        line-height: 28px;
        letter-spacing: 0px;
        margin: 2px 0;
        padding: 5px;
        text-indent: 0px;
        border: 1px solid #434343d1;
        
    }
    .avatarLetters-color-1 { background: #69bf80a3; }
    .avatarLetters-color-2 { background: #c7a93ca3; }
    .avatarLetters-color-3 { background: #ab3a89a3; }
    .avatarLetters-color-4 { background: #ab3a4da3; }
    .avatarLetters-color-5 { background: #809629a3; }
    .avatarLetters-color-6 { background: #5a5fa6a3; }
    .avatarLetters-color-7 { background: #3e9bc7a3; }
    .avatarLetters-color-8 { background: #427a2ca3; }
    .avatarLetters-color-9 { background: #6c9e8fa3; }
    .avatarLetters-color-10 { background: #c969a6a3; }
    .avatarLetters-color-11 { background: #cf8600a3; }
    .avatarLetters-color-12 { background: #cf3700a3; }
    .avatarLetters-color-13 { background: #006ecfa3; }
    .avatarLetters-color-14 { background: #b77ccca3; }
    .avatarLetters-color-15 { background: #8a485fa3; }
    .avatarLetters-color-16 { background: #8a485fa3; }
    .avatarLetters-color-17 { background: #bed444a3; }
    .avatarLetters-color-18 { background: #21ad5ba3; }
    .avatarLetters-color-19 { background: #9c7373a3; }
    .avatarLetters-color-20 { background: #3a9cb5a3; }
 

还有一个简单的 html 标签，但我为它创建了一个函数，这样我就可以将它重用于用户列表中显示大量头像的大型界面

function comments_rand_avatar_color($name,$zoom=1,$classes=''){

    mt_srand(round(crc32($name)/1000)); // Seed the random number generator with the hash of the name
    $randomNumber = mt_rand(1, 20); // Generate a random number between 1 and 20
    
    $words = explode(' ', $name);
    $letters = '';
    if (count($words) >= 2) {
        $letters .= strtoupper(substr($words[0], 0, 1));
        $letters .= strtoupper(substr($words[1], 0, 1));
    } elseif (count($words) == 1) {
        $letters .= strtoupper(substr($words[0], 0, 2));
    }
    
    $zoom = ($zoom) ? $zoom : 1;

    $str = "<i class='avatarLetters avatarLetters-color-{$randomNumber} {$classes}' style='zoom:{$zoom}'>{$letters}</i>";
    
    return $str;
}

这就是你如何使用它：

<?php echo comments_rand_avatar_color("Samuel Fox", '0.8', 'some-oter-class'); ?>

缩放参数，当您需要在不同的用例中调整头像的大小，并且不想更改函数设置的大小时，非常有用。该名称可以从您的数据库记录中获取，并且该功能足够轻，可以运行大量（同一页面上数千个）化身，而不会明显减慢。