На прошлой неделе мы официально запустили Spotlitt, услугу, направленную на то, чтобы предоставить артистам-исполнителям простое в управлении и красивое присутствие в Интернете.
У нас было две основные цели со Spotlitt:
- Максимально упростить сервис для пользователей
- Делаем готовые темы максимально гибкими и «волшебными»
Визуальным акцентом каждой темы является как минимум один снимок в голову или фотография исполнителя. Это поставило перед нами интересную задачу: как сделать так, чтобы фотография выглядела великолепно, независимо от размера, пропорции или положения, в котором она была представлена. По сути, мы хотели сохранить лицо пользователя на фотографии в центре, несмотря ни на что.
В этом примере мы будем использовать следующее изображение этого неудачно выглядящего джентльмена:
Попытка распознавания
Прежде всего, нам нужно идентифицировать лица на любых загруженных изображениях. Поскольку мы уже тепло устроились в экосистеме AWS, мы обратились к AWS Rekognition.
Вы можете запустить изображение через Rekognition вручную, чтобы увидеть, как он интерпретирует изображения и какие ответы он возвращает. Для приведенного выше изображения дайте Rekognition молоток, потому что он прибил его:
Ответ, который возвращает AWS, довольно надежен, вот его немного сокращенная версия:
SDK для распознавания
Интеграция с помощью PHP SDK сделана с помощью сервиса тривиально.
Как только изображения попали в S3, мы просто попросили Rekognition идентифицировать любые лица на изображениях:
Прохладный. Теперь, когда у нас есть результат от Rekognition, мы можем рассчитать все, что захотим, относительно положения обнаруженных лиц.
Примечание. В этом примере у нас уже есть некоторая информация об изображении, такая как ширина и высота, сохраненная в объекте $image.
Сладкий. Мы уже на пути к той «магии», к которой стремились. Теперь к передней части.
Передняя часть
Вот шаблон с уже примененным нашим решением:
Два изображения являются фоном для двух контейнеров div. Я отчаянно пытался придумать решение, основанное только на CSS, чтобы эти два лица оставались центрированными, несмотря ни на что, но потерпел неудачу. Если у кого-то есть решение, я с удовольствием куплю вам самые лучшие рожки мороженого.
Итак, мы остановились на Javascript. Мы добавили свойства изображения на саму страницу, встроенные (x и y — проценты):
Вот немного упрощенная версия того, что мы придумали, чтобы лица находились в центре любого контейнера:
Теперь мы получаем это (магия):
Кадрируйте с уверенностью
Теперь, когда мы вооружены этим богатством информации об изображении, мы можем с пользой использовать нашу библиотеку обработки изображений. Я предпочитаю Glide из The PHP League. Для наших фотогалерей мы можем разумно обрезать изображения, чтобы лица всегда были видны:
Это также позволяет нам создавать приятные штрихи, такие как изящный (и хорошо обрезанный) фавикон:
Наличие этой информации позволяет вам разрабатывать и позиционировать суперспецифически. Например, когда Дэмиан Макки хотел оставить только кусочек фотографии для просмотра этой темы на мобильных устройствах, было легко расположить его так, чтобы левый глаз был в центре и выглядел последовательно, поскольку Rekognition предоставил нам точное расположение этой черты лица:
Подведение итогов
Стратегическое использование сложных технологий за кулисами обеспечивает более сильное взаимодействие с пользователем, когда пользователю не нужно думать о каждом аспекте того, что он делает, это «просто работает». Большую часть времени пользователь даже не поймет, что происходит, он просто будет счастлив, что его сайт всегда выглядит хорошо.
Если это было полезно для вас или вызвало какие-либо идеи для вашего собственного проекта, поставьте ❤ ниже, чтобы другие тоже могли его найти!
