Tagging people in photos is a common procedure that you use a lot in social networks. If you want to create similar functionality on your website, the JavaScript world can offer something for you. Actually, you can do that with any library which provides face detection methods, you just need to write some additional methods. To simplify the code, we will follow an example from the tracking.js library. It is easy to understand and implement:
First, we need to place our image to the HTML code:
<div id="photo"><img id="img" src="/path/to/your/image.jpg"/></div>
Here is an array that holds all the names that need to be tagged:
var theBeatles = ['George Harrison', 'John Lennon', 'Ringo Starr', 'Paul McCartney'];
Then, we start from initializing our
ObjectTrackerfunction with afaceobject:var tracker = new tracking.ObjectTracker('face');The whole magic goes on in a post processing function:
tracker.on('track', function (event) { var data = event.data...