Автоматически украшайте людей лепреконами на своем веб-сайте ко Дню Святого Патрика.
!!! - ВНИМАНИЕ - !!!
Некоторые китайцы считают, что дать человеку зеленую шляпу Оскорбительно, так как в отношениях это означает то же самое, что и измена. Поэтому используйте это ВНИМАТЕЛЬНО, когда обслуживаете китайскую базу пользователей.
!!! - ВНИМАНИЕ - !!!
В этом уроке мы рассмотрим, как разместить шляпу лепрекона на изображениях вашего веб-сайта, на которых изображены люди. Этот процесс будет осуществляться с помощью некоторых фреймворков компьютерного зрения, так что это будет тот же объем работы, даже если вам нужно будет проработать миллионы портретов. Демо можно найти здесь с разрешения моих товарищей по команде.
Это руководство предназначено для более продвинутой аудитории. Я предполагаю, что вы сможете разобраться во многих основах самостоятельно. Я также сделал несколько руководств для начинающих, которые прикрепил в конце в виде ссылок.
1. Первоначальная настройка
Прежде чем мы начнем это руководство, нам нужно сначала выполнить некоторую настройку.
Прежде всего, мы используем tracking.js, чтобы помочь нам в этом проекте, и поэтому нам необходимо загрузить и извлечь необходимые файлы для tracking.js из здесь .
В этом руководстве мы начнем с шаблона веб-сайта, который я взял у нашей команды WiX, который представляет собой систему управления контентом (CMS), позволяющую создавать веб-сайты с гораздо меньшими усилиями. Шаблон можно скачать здесь. Распакуйте файлы в папку tracking.js-master из предыдущего шага.
Для того, чтобы все работало, нам еще нужен сервер. В этом руководстве мы будем использовать простой сервер Python. Если у вас нет Python или Homebrew (которые помогают установить Python), вы можете использовать следующие команды bash для их установки.
Установка Homebrew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Установка Python:
brew install python
Теперь, когда все готово, мы запустим приведенную ниже команду под нашим «tracking.js-master», чтобы запустить сервер Python.
python -m SimpleHTTPServer
Для проверки перейдите по этой ссылке вашего локального хоста, чтобы увидеть пример страницы. Вы также должны иметь возможность просмотреть извлеченный пример страницы из здесь. И это все, что вам нужно сделать для настройки.
2. Создание шляпы.
В отличие от других моих руководств, мы будем использовать онлайн-изображения для этого руководства, а не пытаться воссоздать все с помощью CSS.
Я нашел шляпу лепрекона от kisspng, и ее можно найти здесь. Сохраните изображение в корневую папку нашего сайта. Добавив следующий код в конец над </html>, мы сможем просмотреть изображение на нашем примере веб-сайта после сохранения и перезагрузки.
<body> <img id = "hat" class = "leprechaunhat" src = "./leprechaunhat_kisspng.png" > </body>
Теперь нам нужно создать анимацию падения с помощью CSS и поместить код над объявлением шляпы. Код в основном позволяет шляпе опуститься, а затем немного встряхнуть.
<style> @keyframes shake { 0% { transform : translateY(-30px); } 40% { transform : rotate(10deg); } 60% { transform : rotate(-10deg); } 80% { transform : rotate(10deg); } 100% { transform : rotate(0deg); } } .leprechaunhat { animation : shake 1s ease-in; } </style>
3. Снимайте шляпы на портретах.
Теперь перейдем к тому, чтобы сбрасывать шляпы именно на портреты. Во-первых, мы должны сослаться на файлы JavaScript из «tracking.js» с помощью следующего кода.
<script src = "build/tracking-min.js" type = "text/javascript" ></script> <script src = "build/data/face-min.js" type = "text/javascript" ></script>
Код предоставляет нам Tracker класс, в который мы можем загружать изображения. Затем мы можем услышать ответ, указывающий на прямоугольник, очерчивающий лица внутри изображения.
Начнем с определения функции, которая выполняется при загрузке страницы. При необходимости эту функцию можно прикрепить к любому другому месту. yOffsetValue - это смещение, выравнивающее шляпу в более подходящее положение.
const yOffsetValue = 10;
window.onload = function() {
};
Внутри мы определяем нашу функцию создания шляп, позволяющую создавать шляпы произвольных размеров и положений.
function placeHat(x, y, w, h, image, count) {
hats[count] = hat.cloneNode(true);
hats[count].style.display = "inline";
hats[count].style.position = "absolute";
hats[count].style.left = x + "px";
hats[count].style.top = y + "px";
hats[count].style.width = w + "px";
hats[count].style.height = h + "px";
image.parentNode.parentNode.appendChild(hats[count]);
}
Мы также должны немного повернуть наш скрипт объявления изображения, чтобы он скрывал изображение, как мы сейчас показываем его с помощью JavaScript.
<img id = "hat" class = "leprechaunhat" src = "./leprechaunhat_kisspng.png" style = "display : none" >
Затем мы добавляем следующий код для создания шляп поверх лиц с размером, соответствующим лицу.
var hat = document.getElementById("hat");
var images = document.getElementsByTagName('img');
var trackers = [];
var hats = [];
for(i = 0; i < images.length; i++)
{
(function(img)
{
trackers[i] = new tracking.ObjectTracker('face');
tracking.track(img, trackers[i]);
trackers[i].on('track', function(event) {
event.data.forEach(function(rect) {
var bcr = img.getBoundingClientRect();
placeHat(rect.x, rect.y + yOffsetValue - rect.height, rect.width, rect.height, img, i);
});
});
})(images[i]);
}
Теперь, пока наш сервер Python все еще работает, вызов по следующему адресу должен показать нам, как шляпы лепреконов падают на портреты.
http://localhost:8000/TEAM%20MEMBERS%20_%20Teamwebsite.html
Поздравляю! Вы только что узнали, как накинуть шляпу лепрекона на все портреты на веб-сайте с компьютерным зрением. Желаю вам, вашим друзьям и публике удачного Дня Святого Патрика !!!
В конце концов
Я связал некоторые из предыдущих руководств ниже по аналогичным проектам. Я считаю, что во фронтенд-дизайне есть определенные тенденции. Несмотря на недавно появившиеся фреймворки .js и обновления ES, компьютерная анимация и искусственный интеллект могут творить чудеса в будущем для интерфейсной части, улучшая взаимодействие с пользователем с элегантностью и эффективностью.
Новичок:
- Как наполнить ваш сайт милыми СЕРДЦАМИ ВАЛЕНТИНЫ
- Как добавить ФЕЙЕРВЕРК на свой сайт
- Как добавить пузыри на свой сайт
Дополнительно:
Я увлечен программированием и хотел бы узнавать что-то новое. Я считаю, что знания могут сделать мир лучше, и поэтому у меня есть мотивация делиться ими. Дайте мне знать, если вы хотите прочитать что-нибудь конкретное.
Если вы ищете исходный код этого проекта, их можно найти здесь. Еще раз спасибо моим товарищам по команде, которые разрешили мне использовать их портреты для этого проекта, и будьте осторожны, прежде чем использовать это на веб-сайте с китайской базой пользователей.
