Как автоматически создавать аватар по первой букве ника/имени пользователя?

Question

[soofftt91]

Здравствуйте. Подскажите как можно генерировать простой аватар с первой буквой имени и желательно с собственным цветом.

Пару месяцев назад натыкался на статью в которой описывалось как на js получать первую букву и получать из всего имени собственный цвет.

Answer 1

[soofftt91]

Стоит мне тут задать вопрос, как в течении пары минут нахожу ответ самостоятельно и это не смотря на то что до этого искал больше часа.

Вот статья: https://www.mobila.name/post/5594fd502aaff/
Используется только JS, ну и немного CSS для стилизации.

Результат после небольшой доработки кода:

Comments

[A K]

Ищите 2 часа, и не надо будет создавать темы.

[Volodymyr Lavryk]

Любой вопрос здесь уже был задан и не раз на других площадках. Так что лучше сразу идти на SO там ответ уже точно поймаете ;)

[Глюкъ Виртуален]

Ха, а если ник состоит из 2 слов?

[soofftt91]

Глюкъ Виртуален: в качестве "ника" на сайте используется имя и фамилия. Всё прекрасно работает))

[Глюкъ Виртуален]

soofftt91: и у вас на картинке, и в приведенном коде в аватар будет выноситься первая буква только первого слова.
Хотя вашим клиентам наверное и так сойдет, если вы считаете что это "работает".

[soofftt91]

Глюкъ Виртуален: это исключительно декоративный элемент его видят не все пользователи сайта, а только пара администраторов.

Чтобы выводить 2 буквы нужно в код 2-3 стоки добавить.

[Глюкъ Виртуален]

soofftt91: две кириллические буквы? :)
Серьезно?
А поделитесь этими двумя строчками... я не осилил :(

[soofftt91]

Глюкъ Виртуален: вместо строки:
var letter = name.substr(0, 1);

Напишите регулярку которая получает первую букву строки и первую букву после пробела.

[Глюкъ Виртуален]

soofftt91: регулярку, которая будет понимать кириллицу?
Вы серьезно? :)

[soofftt91]

Глюкъ Виртуален: я полный нуб в регулярных выражениях, но с кириллицей проблем как то не возникало https://yadi.sk/i/C7w1PA71mXU9m

[soofftt91]

https://regex101.com/r/pR6lE8/1

[Глюкъ Виртуален]

soofftt91: это хорошо что не возникало :)
я когда пытался вытащить две кириллические буковки, весь инторнет изгуглил.. вопросов куча, ответов нет. Все говорят про юникод, дак он давно уже юникод...

Answer 2

[Александр]

Сделай это с помощью PHP. А изображения с буквами просто нарисуй в графическом редакторе. Намного проще, чем при помощи скриптов каждый раз создавать картинку.

Comments

[Лев Кекиш]

Полностью согласен.

Answer 3

[98h]

JS библиотека: first-letter-avatar