• Главная
  • »
  • PHP
  • »
  • PHP: Генерация аватара из инциалов пользователя

PHP: Генерация аватара из инциалов пользователя

Дата: 15.09.2017 в 22:27, Категория: PHP
  • 3128
  • 14
PHP: Генерация аватара из инциалов пользователя

Прошлый век, это когда вы вставляете noavatar.png для пользователей, у которых отсутствует аватарки. Настала новая эра и пора уже менять эти однотипные noavatar, на что-то более приятное и как минимум, осмысленное. В этой статье, я хотел бы рассказать о том, как просто сделать аватарки из инициалов зарегистрированного пользователя.

Действительно, пора уже отказаться от этих типичных изображений, где нарисован или какой-нибудь серый чувак или вопросительный знак. Во-первых, каждая аватарка юзера будет уникальной. Во-вторых, разнообразие. И в-третьих, различие между юзерами, к примеру в комментариях.

Первый раз, такого рода аватарки я заметил в Telegram. И мне это очень понравилось. Сегодня, мне стало интересно как такое сделать самому. Хотел разработать это на Node.JS, но мне было лень устанавливать зависимости, прописывать роутинги и т.п. Решил использовать PHP. Он отлично подойдёт для демонстрации.

# Как мы будем генерировать уникальные аватарки?

У меня было несколько вариантов реализации данной идеи. Но, я остановился почему-то на векторе.

  • Использовать какую-нибудь библиотеку, для генерации PNG изображения и вставки туда этих двух букв.
  • При рендере страницы, генерировать <div> с уникальным цветом. Уникальный цвет можно было бы генерировать получив номера UNICODE первых трех символов из фамилии или имени. Далее, с помощью полученных чисел, вычислять рандомно три разных числа так, чтобы они не достигали больше 200 и генерировать с помощью rgba() цвет фона.
  • Создать векторное изображение SVG и просто заменять внутри элемента <circle> цвет и у элемента текст.

Я как и говорил, выбрал третий вариант. Быстро набросил аватарку на Sketch и сохранил ее в SVG.

В качестве теста, я разработал простую форму:

<html>
  <head>
    <title>PHP Letter Avatar</title>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
    <link href="./public/css/app.css" rel="stylesheet"/>
  </head>
</html>
<body>
  <div class="container">
    <form role="form" action="index.php" method="POST" enctype="multipart/form-data">
      <h3>Регистрация профиля</h3><br/>
      <div class="form-group">
        <label for="firstname">Имя</label>
        <input class="form-control" id="firstname" type="text" value="" name="firstname" placeholder=""/>
      </div>
      <div class="form-group">
        <label for="lastname">Фамилия</label>
        <input class="form-control" id="lastname" type="text" value="" name="lastname" placeholder=""/>
      </div>
      <div class="form-group">
        <label for="avatar">Аватарка</label>
        <input id="avatar" type="file" name="avatar"/>
      </div>
      <div class="form-group"><br/>
        <button class="btn btn-primary" type="submit">Отправить</button>
      </div>
    </form>
  </div>
</body>

Далее, я создал массив шести разных flat цветов для фона.

$hex = array(
  '#F29B34',
  '#A19C69',
  '#3C3741',
  '#25373D',
  '#EB9532',
  '#60646D'
);

В сохранённом SVG файле, я заменил цвет фона на HEX_COLOR и текст на USERNAME, чтобы заранее заменить эти два значения на рандомный цвет и два символа из имени и фамилии.

Если юзер прислал аватарку, то всё окей, мы ее вставляем в БД для конкретного юзера (в примере я не стал делать SQL запросы). Если же, юзер не прислал аватарку, генерируем ее.

if ( !empty($_FILES['avatar']['name']) ) {

      $filename = $dir.'/'.basename($_FILES['avatar']['name']);

      if (!move_uploaded_file($_FILES['avatar']['tmp_name'], $filename)) {
        die('Error: avatar not uploaded!');
      }

      // Далее сохраняем картинку в БД и т.п...

    } else {

      $avatar_example = str_replace('USERNAME', $letters, $avatar_example);
      $avatar_example = str_replace('HEX_COLOR', $hex[array_rand($hex, 1)], $avatar_example);

      $gen_avatar = md5($letters).'.svg';

      file_put_contents($dir.'/'.$gen_avatar, $avatar_example);

      echo <<<HTML

<h1>{$firstname} {$lastname}</h1>
<br>
<img src="uploads/{$gen_avatar}" />

HTML;

    }

И выводим результат в новой странице с именем и со сгенерированной аватаркой для юзера.

Примерно таким простым способом, вы генерируете уникальные аватарки для каждого юзера + векторные. Это намного красивей и лучше, нежели вставлять типичные noavatar.

Весь исходный код, я приложил ниже.

# index.php

<?php

  ini_set('display_errors', 1);

  $hex = array(
    '#F29B34',
    '#A19C69',
    '#3C3741',
    '#25373D',
    '#EB9532',
    '#60646D'
  );

  if (
      isset($_POST['firstname']) && isset($_POST['lastname']) &&
      !empty($_POST['firstname']) && !empty($_POST['lastname'])
  ) {

    $firstname = $_POST['firstname'];
    $lastname = $_POST['lastname'];

    $avatar_example = file_get_contents('./public/avatar.svg');

    $dir = __DIR__.'/uploads';

    if ( !empty($_FILES['avatar']['name']) ) {

      $filename = $dir.'/'.basename($_FILES['avatar']['name']);

      if (!move_uploaded_file($_FILES['avatar']['tmp_name'], $filename)) {
        die('Error: avatar not uploaded!');
      }

      // Далее сохраняем картинку в БД и т.п...

    } else {

      $avatar_example = str_replace('USERNAME', $letters, $avatar_example);
      $avatar_example = str_replace('HEX_COLOR', $hex[array_rand($hex, 1)], $avatar_example);

      $gen_avatar = md5($letters).'.svg';

      file_put_contents($dir.'/'.$gen_avatar, $avatar_example);

      echo <<<HTML

<h1>{$firstname} {$lastname}</h1>
<br>
<img src="uploads/{$gen_avatar}" />

HTML;

    }

  }