Evet arkadaşlar bu gün sizlere yüz tanımaya yarayan bir tane uygulamadan bahsedeceğim. Bildiğiniz üzere Facebook sitesine bir fotoğraf yüklediğinizde eğer insan yüzü var ise otomatik tespit edip sizden kişileri etiketlemenizi ister. Aynı algoritma Android cihazlarda da mevcut. Herhangi bir fotoğraf çekerken telefon ekranında kişilerin yüzlerinin etrafında bir kare oluştuğunu görebilirsiniz. Joy Salvat tarafından geliştirilen FaceDetection.js uygulamasının orjinal Algoritması Liu Liu tarafından geliştirilmiş. Joy Salvat da bu algoritmayı kullanarak jQuery’ye uyarlamış. Çin’li bir geliştirici olan Liu Liu’nun bu algoritması insan yüzündeki koordinatları tanımlayarak tespit etmeye yarıyor. Çok daha uzun zaman önce FaceDetection.js ile karşılaştığım halde sizlerle paylaşmak baya geç oldu sanırım. Dosyaları indirdiğimde çalışmamıştı ve bir türlü html dosyası olarak masa üstünde kullanamamıştım. İndireceğiniz dosyayı test edebilmeniz için bir sunucuya atmanız gerekiyor.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri :
<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="js/facedetection/ccv.js"></script> <script src="js/facedetection/face.js"></script> <script src="js/jquery.facedetection.js"></script>
JavaScript:
$(document).ready(function () { $("img").click(function () { var coords = $(this).faceDetection(); for (i = 0; i < coords.length; i++) { $("<div>", { "class": "facebox", "css": { "left": coords[i].positionX + "px", "top": coords[i].positionY + "px", "width": coords[i].width + "px", "height": coords[i].height + "px" } }).appendTo("#content"); } alert("done"); }); });
Stil :
.facebox { border:4px solid #ff0000; position:absolute; } img { cursor:pointer; }
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="content"> <img src="img/09.jpg" /> <img src="img/10.jpg" /> <img src="img/12.jpg" /> </div>