Face Detection con jQuery

Sono sempre stato incuriosito dal software di riconoscimento perché non riesco a immaginare la logica che sta in tutti gli algoritmi. Che si tratti di voce, viso o altri tipi di rilevamento, le persone hanno un aspetto e un suono così diversi, le immagini vengono scattate in modo diverso e da diverse angolazioni, non riesco a capire come sia tutto fatto. Dato che ho già coperto booby rilevamento della nudità con JavaScript, ho pensato che sarebbe valsa la pena di esplorare il rilevamento dei volti. Facebook lo usa, quindi forse ha un'applicazione nei tuoi siti web.

Una libreria di rilevamento dei volti che ho trovato è Face Detection di Jay Salvat e Liu Liu. Questo è un plug-in jQuery standard che riceve un'immagine e restituisce una matrice di coordinate di volti trovati all'interno dell'immagine. Diamo un'occhiata a come usarlo!

jQuery.faceDetection

Sono necessari quattro file JS per questo plugin jQuery:

<script src="jquery-1.4.3.min.js"></script>

<!-- mas js -->
<script src="facedetection/ccv.js"></script>
<script src="facedetection/face.js"></script>
<script src="jquery.facedetection.js"></script>

Il plug-in faceDetection racchiude la funzionalità all'interno dei primi due file JavaScript e restituisce una matrice di oggetti che rappresentano le coordinate dei volti all'interno della foto (se presenti). Un esempio potrebbe essere:

var coords = jQuery("#myImage").faceDetection();
/* Returns:
	{
		x: 525
		y: 435,
		width: 144,
		height: 144,
		positionX: 532.6353328125226,
		positionY: 443.240976080536,
		offsetX: 532.6353328125226,
		offsetY: 443.240976080536,
		confidence: 12.93120119,
		neighbour: undefined,
	}
*/

Puoi anche aggiungere richiamate di eventi a ogni chiamata:

var coords = jQuery("#myImage").faceDetection({
	complete: function(image, coords) {
		// Do something
	},
	error: function() {
		console.warn("Could not process image");
	}
});

Sta a te decidere cosa vorresti fare quando i volti saranno stati trovati. Puoi aggiungere un quadrato attorno al viso della persona:

jQuery("img").each(function() {
	var img = this;
	// Get faces cooridnates
	var coordinates = jQuery(img).faceDetection();
	// Make boxes if faces are found
	if(coordinates.length) {
		coordinates.forEach(function(coord) {
			jQuery("", {
				css: {
					position: "absolute",
					left: coord.positionX + 5 + "px",
					top: coord.positionY + 5 + "px",
					width: coord.width + "px",
					height: coord.height + "px",
					border: "3px solid white"
				}
			}).appendTo(img.parentNode);
		});
	}
});

Non c'è molto di più!

Ho provato a variare le foto su cui ho utilizzato faceDetection e, come mi aspettavo, i risultati non sono perfetti. Sono, tuttavia, abbastanza buoni; nessun software sarà perfetto per tutti i casi. Il software inoltre non esegue il confronto facciale, quindi è necessario fornire suggerimenti sull'identità del viso tramite un altro metodo. Per quello che questo plugin dovrebbe fare, tuttavia, funziona abbastanza bene. Ti incoraggio a fare un tentativo!