Рубрики
Без рубрики

Как бросить Leprechaun-Hats на свой веб-сайт с компьютерным зрением

Автоматически Leprechaun-Hat люди на вашем сайте для дня Святого Патрика. !!! – ПРЕДУПРЕЖДЕНИЕ – !!! Придавая человеку, что зеленая шляпа может считаться оскорбительным для некоторых китайцев, так как он имеет то же значение, что и мошенничество в отношениях. Так тщательно используйте это, когда вы обслуживаете китайскую базу пользователей. !!! – ПРЕДУПРЕЖДЕНИЕ

Автор оригинала: FreeCodeCamp Community Member.

Автоматически Leprechaun-Hat люди на вашем сайте для дня Святого Патрика.

В этом руководстве мы перейдем, как бросить шляпу Leprechaun на ваши веб-сайт, которые содержат людей. Процесс будет проведен через помощь некоторых Компьютерное зрение Рамки, так что это будет такая же работа, даже если у вас миллионы портретов, чтобы пройти. Демо можно найти здесь Благодаря разрешению от моих товарищей по команде.

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

1. Первоначальная настройка

Прежде чем начать этот учебник, нам нужно сначала выполнить некоторые настройки.

Прежде всего, мы используем Отслеживание.js Чтобы помочь нам в этом проекте, и поэтому нам нужно скачать и извлечь необходимые файлы для Отслеживание.js от здесь Отказ

Для этого учебника мы начинаем с веб-сайта шаблона, который я вырвал из нашей команды Wix который является Система управления контентом (CMS) позволяя вам создавать веб-сайты с гораздо меньшем усилием. Шаблон можно скачать из здесь Отказ Извлеките файлы в папку «Tracking.js-Master» с предыдущего шага.

Для того, чтобы все работать, нам также нужен сервер. Мы будем использовать простой Python Server для этого руководства. Если у вас нет Python или Homebrew (который помогает установить Python), вы можете использовать следующие команды Bash для их установки.

Установка домелки:

/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 Отказ

Я нашел шляпу Leprechaun от Kisspng И это можно найти здесь Отказ Сохраните изображение в корневую папку нашего сайта. Применяя следующий код до конца выше ML>, мы должны иметь возможность просматривать изображение в нашем примере веб-сайта после сохранения и перезагрузки.

Теперь мы должны разработать анимацию падения с CSS и поставить код над декларацией шляпы. Код в основном позволяет шляпе упасть, а затем немного встряхнуть.

3. Капли шляпы на портреты

Теперь мы пройдем за падение шляпков именно на портреты. Сначала мы должны ссылаться на файлы JavaScript из «Tracking.js» со следующим кодом.

Код предоставляет нам Трекер Класс, который мы можем кормить изображения. Тогда мы можем слушать ответ, указывающий на прямоугольник, выброс грани внутри изображения.

Начнем с определения функции, которая выполняется, когда страница загружена. Эта функция может быть прикреплена к тому, что где необходимо при необходимости. ЙoffsetValue это смещение, выравнивая шляпу в более подходящее положение.

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.

Затем мы добавляем следующий код, чтобы создать шляпы поверх лиц, с размером, соответствующим лицом.

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 Server все еще работает, вызывая следующий адрес должен показать нам шляпы Leprechaun, падающие на портреты.

http://localhost:8000/TEAM%20MEMBERS%20_%20Teamwebsite.html

Поздравляю! Вы только что узнали, как бросить шляпы LepeChaun на все портреты на веб-сайте с компьютерным зрением. Желаю вам, ваших друзей и вашей аудитории великого дня Святого Патрика !!!

В конце концов

Я связал некоторые из предыдущих руководств ниже на аналогичных проектах. Я считаю, что в дизайне передней части есть определенные тенденции. Несмотря на недавно появляющиеся конференц-фреймворки .j и обновлениям ES, компьютерные анимации и искусственный интеллект могут сделать чудеса в будущем для переднего конца, улучшая пользовательский опыт с элегантностью и эффективностью.

Начинающий:

Передовой:

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

Если вы ищете исходный код этого проекта, их можно найти здесь Отказ Еще раз спасибо за мои товарищи по команде, которые позволили мне использовать свои портреты для этого проекта и Будьте осторожны, прежде чем использовать это на веб-сайте с китайской базой пользователя Отказ

Читайте ещё по теме: