Прошлый век, это когда вы вставляете noavatar.png для пользователей, у которых отсутствует аватарки. Настала новая эра и пора уже менять эти однотипные noavatar, на что-то более приятное и как минимум, осмысленное. В этой статье, я хотел бы рассказать о том, как просто сделать аватарки из инициалов зарегистрированного пользователя.
Действительно, пора уже отказаться от этих типичных изображений, где нарисован или какой-нибудь серый чувак или вопросительный знак. Во-первых, каждая аватарка юзера будет уникальной. Во-вторых, разнообразие. И в-третьих, различие между юзерами, к примеру в комментариях.
Первый раз, такого рода аватарки я заметил в Telegram. И мне это очень понравилось. Сегодня, мне стало интересно как такое сделать самому. Хотел разработать это на Node.JS, но мне было лень устанавливать зависимости, прописывать роутинги и т.п. Решил использовать PHP. Он отлично подойдёт для демонстрации.
У меня было несколько вариантов реализации данной идеи. Но, я остановился почему-то на векторе.
<div> с уникальным цветом. Уникальный цвет можно было бы генерировать получив номера UNICODE первых трех символов из фамилии или имени. Далее, с помощью полученных чисел, вычислять рандомно три разных числа так, чтобы они не достигали больше 200 и генерировать с помощью rgba() цвет фона.SVG и просто заменять внутри элемента <circle /> цвет и у элемента <text /> текст.Я как и говорил, выбрал третий вариант. Быстро набросил аватарку на Sketch и сохранил ее в SVG.
_23<body>_23 <img src="https://archakov.im/uploads/64bbac922eb51453.svg" rel="stylesheet"/>_23 <div class="container">_23 <form role="form" action="index.php" method="POST" enctype="multipart/form-data">_23 <h3>Регистрация профиля</h3><br/>_23 <div class="form-group">_23 <label for="firstname">Имя</label>_23 <input class="form-control" id="firstname" type="text" value="" name="firstname" placeholder=""/>_23 </div>_23 <div class="form-group">_23 <label for="lastname">Фамилия</label>_23 <input class="form-control" id="lastname" type="text" value="" name="lastname" placeholder=""/>_23 </div>_23 <div class="form-group">_23 <label for="avatar">Аватарка</label>_23 <input id="avatar" type="file" name="avatar"/>_23 </div>_23 <div class="form-group"><br/>_23 <button class="btn btn-primary" type="submit">Отправить</button>_23 </div>_23 </form>_23 </div>_23</body>
Далее, я создал массив шести разных flat цветов для фона.
_10$hex = array(_10 '#F29B34',_10 '#A19C69',_10 '#3C3741',_10 '#25373D',_10 '#EB9532',_10 '#60646D'_10);
В сохранённом SVG файле, я заменил цвет фона на HEX_COLOR и текст на USERNAME, чтобы заранее заменить эти два значения на рандомный цвет и два символа из имени и фамилии.
Если юзер прислал аватарку, то всё окей, мы ее вставляем в БД для конкретного юзера (в примере я не стал делать SQL запросы). Если же, юзер не прислал аватарку, генерируем ее.
_28if ( !empty($_FILES['avatar']['name']) ) {_28_28 $filename = $dir.'/'.basename($_FILES['avatar']['name']);_28_28 if (!move_uploaded_file($_FILES['avatar']['tmp_name'], $filename)) {_28 die('Error: avatar not uploaded!');_28 }_28_28 // Далее сохраняем картинку в БД и т.п..._28_28 } else {_28_28 $avatar_example = str_replace('USERNAME', $letters, $avatar_example);_28 $avatar_example = str_replace('HEX_COLOR', $hex[array_rand($hex, 1)], $avatar_example);_28_28 $gen_avatar = md5($letters).'.svg';_28_28 file_put_contents($dir.'/'.$gen_avatar, $avatar_example);_28_28 echo <<<HTML_28_28<h1>{$firstname} {$lastname}</h1>_28<br>_28<img src="uploads/{$gen_avatar}" />_28_28HTML;_28_28 }
И выводим результат в новой странице с именем и со сгенерированной аватаркой для юзера.
Примерно таким простым способом, вы генерируете уникальные аватарки для каждого юзера + векторные. Это намного красивей и лучше, нежели вставлять типичные noavatar.
Весь исходный код, я приложил ниже.
_55<?php_55_55 ini_set('display_errors', 1);_55_55 $hex = array(_55 '#F29B34',_55 '#A19C69',_55 '#3C3741',_55 '#25373D',_55 '#EB9532',_55 '#60646D'_55 );_55_55 if (_55 isset($_POST['firstname']) && isset($_POST['lastname']) &&_55 !empty($_POST['firstname']) && !empty($_POST['lastname'])_55 ) {_55_55 $firstname = $_POST['firstname'];_55 $lastname = $_POST['lastname'];_55_55 $avatar_example = file_get_contents('./public/avatar.svg');_55_55 $dir = __DIR__.'/uploads';_55_55 if ( !empty($_FILES['avatar']['name']) ) {_55_55 $filename = $dir.'/'.basename($_FILES['avatar']['name']);_55_55 if (!move_uploaded_file($_FILES['avatar']['tmp_name'], $filename)) {_55 die('Error: avatar not uploaded!');_55 }_55_55 // Далее сохраняем картинку в БД и т.п..._55_55 } else {_55_55 $avatar_example = str_replace('USERNAME', $letters, $avatar_example);_55 $avatar_example = str_replace('HEX_COLOR', $hex[array_rand($hex, 1)], $avatar_example);_55_55 $gen_avatar = md5($letters).'.svg';_55_55 file_put_contents($dir.'/'.$gen_avatar, $avatar_example);_55_55 echo <<<HTML_55_55<h1>{$firstname} {$lastname}</h1>_55<br>_55<img src="uploads/{$gen_avatar}" />_55_55HTML;_55_55 }_55_55 }