如何使用COMPUTER VISION将LEPRECHAUN-HATS放入您的网站

在圣帕特里克节期间自动在您的网站上妖精帽子的人。 (Automatically leprechaun-hat people on your website for St. Patrick’s Day.)

!!! — WARNING — !!!

!!! - 警告 - ！！！

Giving a person a green hat can be considered OFFENSIVE to some Chinese people, as it has the same meaning as cheating in a relationship. So use this CAREFULLY when you are serving a Chinese user base.

给一个人顶绿色的帽子对某些中国人来说可能是令人反感的 ，因为它与在恋爱中作弊具有相同的含义。因此，在为中国用户群提供服务时， 请谨慎使用。

!!! — WARNING — !!!

!!! - 警告 - ！！！

In this tutorial, we will go over how to drop a leprechaun hat onto your website images that contain people. The process will be done through the aid of some Computer Vision frameworks, so it will be the same amount of work even if you have millions of portraits to go through. A demo can be found here thanks to the permission from my teammates.

在本教程中，我们将介绍如何将妖精帽子放到包含人的网站图像上。该过程将通过某些计算机视觉框架来完成，因此即使您要处理数百万张肖像，这也将是相同的工作量。在我的队友的允许下，可以在此处找到演示。

This tutorial is for more advanced audiences. I am assuming you can figure out a lot of the fundamentals on your own. I have also made some tutorials for total beginners, which I have attached in the end as links.

本教程面向更高级的读者。我假设您可以自己掌握很多基本知识。我还为初学者编写了一些教程，最后将它们作为链接附在其中。

1.初始设置 (1. Initial Setup)

Before we start this tutorial, we need to first perform some setup.

在开始本教程之前，我们需要先执行一些设置。

First of all, we are using tracking.js to help us in this project, and therefore, we need to download and extract the necessary files for tracking.js from here.

首先，我们正在使用tracking.js在此项目中为我们提供帮助，因此，我们需要从此处下载并提取tracking.js所需的文件。

For this tutorial, we start with a template website I snatched from our team WiX which is a Content Management System (CMS) allowing you to build websites with much less effort. The template can be downloaded from here. Extract the files into the “tracking.js-master” folder from previous step.

对于本教程，我们从我的WiX团队抢夺的模板网站开始，这是一个内容管理系统(CMS)，使您可以轻松地构建网站。可以从此处下载模板。从上一步将文件提取到“ tracking.js-master”文件夹中。

In order to make everything work, we also need a server. We will be using a simple Python server for this tutorial. In case you do not have Python or Homebrew (which helps to install Python), you can use the following bash commands to install them.

为了使一切正常，我们还需要一台服务器。在本教程中，我们将使用一个简单的Python服务器。如果您没有Python或Homebrew(有助于安装Python)，则可以使用以下bash命令进行安装。

Installing Homebrew:

安装自制软件：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Installing Python:

安装Python：

brew install python

Now that everything is ready, we will run the command below under our “tracking.js-master” to start the Python server.

现在一切就绪，我们将在“ tracking.js-master”下运行以下命令以启动Python服务器。

python -m SimpleHTTPServer

To test, go to this link of your local host to see an example page. You should also be able to view the extracted example page from here. And that is all you have to do for the setup.

要进行测试，请转到本地主机的此链接以查看示例页面。您还应该可以从此处查看提取的示例页面。这就是您要做的所有设置。

2.制作帽子 (2. Creating the hat)

Different from my other tutorials, we will be using an online image for this tutorial rather than trying to recreate everything with CSS.

与我的其他教程不同，我们将在本教程中使用在线图像，而不是尝试使用CSS重新创建所有内容。

I found a leprechaun hat from kisspng and it can be found here. Save the image to the root folder of our website. By appending the following code to the end above the </html>, we should be able to view the image in our example website after save and reload.

我从kisspng找到了一个妖精帽子，可以在这里找到。将图像保存到我们网站的根文件夹。通过将以下代码附加到</ht ml>的末尾，在保存并重新加载后，我们应该能够在示例网站中查看图像。

<body><img id = "hat" class = "leprechaunhat" src = "./leprechaunhat_kisspng.png" >
</body>

Now we have to design a drop animation with CSS, and put the code above the hat declaration. The code basically allows the hat to drop down and then shake a little bit.

现在，我们必须使用CSS设计一个放下动画，并将代码放在hat声明上方。该代码基本上允许帽子掉下来然后摇动一点。

<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.将帽子戴在肖像上 (3. Drop hats onto portraits)

Now we will go over dropping hats precisely onto portraits. First we have to reference the JavaScript files from “tracking.js” with the following code.

现在我们将把帽子直接戴在肖像上。首先，我们必须使用以下代码引用“ tracking.js”中JavaScript文件。

<script src = "build/tracking-min.js" type = "text/javascript" ></script>
<script src = "build/data/face-min.js" type = "text/javascript" ></script>

The code provides us a Tracker class which we can feed images into. Then we can listen for a response indicating a rectangle outlining the faces inside the image.

该代码为我们提供了一个Tracker类，可以将图像输入其中。然后，我们可以侦听一个响应，该响应指示一个矩形，该矩形概述了图像内部的各个面。

We start by defining a function that executes when the page is loaded. This function can be attached to anywhere else if necessary. The yOffsetValue is an offset aligning the hat into a more appropriate position.

我们首先定义一个在页面加载时执行的函数。如果需要，可以将此功能附加到其他任何地方。 yOffsetValue是将帽子对齐到更合适位置的偏移量。

const yOffsetValue = 10;
window.onload = function() {
};

Inside, we define our hat creation function, allowing it to create hats with arbitrary sizes and positions.

在内部，我们定义了帽子创建功能，允许它创建具有任意大小和位置的帽子。

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]);
}

We should also twist our image declaration script a little bit to make it hide the image, as we are now showing it with JavaScript.

我们还应该稍微扭曲一下图像声明脚本，使其隐藏图像，因为我们现在使用JavaScript来显示它。

<img id = "hat" class = "leprechaunhat" src = "./leprechaunhat_kisspng.png" style = "display : none" >

Then we add the following code to create the hats on top of faces, with the size matching the face.

然后，我们添加以下代码以在面Kong顶部创建帽子，其大小与面Kong匹配。

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]);
}

Now, while our Python server is still running, calling the following address should show us leprechaun hats dropping onto portraits.

现在，当我们的Python服务器仍在运行时，调用以下地址将向我们显示妖精帽子掉到肖像上。

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

Congratulations! You just learned how to drop leprechaun hats onto all the portraits on a website with computer vision. Wish you, your friends, and your audiences a great St. Patricks Day!!!

恭喜你！您刚刚学习了如何使用计算机视觉将妖精的帽子戴在网站上的所有肖像上。祝您，您的朋友和听众在圣帕特里克节愉快！！！

到底 (In the end)

I have linked some of previous guides below on similar projects. I believe there are certain trends in front end design. Despite the newly emerging .js frameworks and ES updates, Computer Animations and Artificial Intelligence can do wonders in the future for front end, improving user experience with elegancy and efficiency.

我已经在下面链接了一些类似项目的先前指南。我相信前端设计有某些趋势。尽管出现了新出现的.js框架和ES更新，但是计算机动画和人工智能可以在未来为前端创造奇迹，从而以优雅和高效的方式改善用户体验。

Beginner:

初学者：

how to fill your website with lovely VALENTINES HEARTS

如何用可爱的情人节心填充您的网站
how to add some FIREWORKS to your website

如何向您的网站添加一些烟花
how to add some BUBBLES to your website

如何在您的网站上添加一些气泡

Advanced:

高级：

how to create beautiful LANTERNS that ARRANGE THEMSELVES into words

如何创建将自己拼成文字的漂亮灯笼

I am passionate about coding and would love to learn new stuff. I believe knowledge can make the world a better place and therefore am self-motivated to share. Let me know if you are interested in reading anything in particular.

我对编码充满热情，并愿意学习新知识。我相信知识可以使世界变得更美好，因此会自我激励去分享。让我知道您是否对阅读特别内容感兴趣。

If you are looking for the source code of this project, they can be found here. Thanks again for my teammates who allowed me to use their portraits for this project and be wary before using this on a website with a Chinese user base.

如果您正在寻找该项目的源代码，可以在这里找到它们。再次感谢我的队友允许我在项目中使用他们的画像并在拥有中国用户的网站上使用之前保持警惕 。

翻译自: https://www.freecodecamp.org/news/how-to-drop-leprechaun-hats-into-your-website-with-computer-vision-b0d115a0f1ad/