Detekce obličeje pomocí jQuery

Vždy mě fascinoval rozpoznávací software, protože si nedokážu představit logiku, která je součástí všech algoritmů. Ať už jde o hlas, obličej nebo jiné typy detekce, lidé vypadají a znějí tak odlišně, obrázky jsou natočeny jinak a z různých úhlů, nedokážu pochopit, jak se to všechno dělá. Když už jsem se zabýval booby detekce nahoty pomocí JavaScriptu, myslel jsem si, že by stálo za to nějaký čas prozkoumat detekci obličejů. Facebook to používá, takže možná má uplatnění na vašich webech.

Jedna knihovna detekce obličeje, kterou jsem našel, je Face Detection od Jay Salvata a Liu Liu. Toto je standardní plugin jQuery, který přijímá obrázek a vrací pole souřadnic tváří nalezených v obrázku. Pojďme se podívat, jak jej používat!

jQuery.faceDetection

Pro tento plugin jQuery jsou vyžadovány čtyři soubory JS:

<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>

Zásuvný modul faceDetection zabalí funkčnost do prvních dvou souborů JavaScript a vrátí pole objektů, které představují souřadnice tváří na fotografii (pokud jsou nějaké nalezeny). Příklad by byl:

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,
	}
*/

Ke každému hovoru můžete také přidat zpětná volání události:

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

Je na vás, co byste chtěli dělat, až budou tváře nalezeny. Můžete přidat čtverec kolem obličeje osoby:

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

O moc víc toho není!

Snažil jsem se měnit fotografie, na kterých jsem použil faceDetection, a jak jsem očekával, výsledky nejsou dokonalé. Jsou však docela dobré; žádný software nebude dokonalý pro všechny případy. Software také neprovádí porovnávání obličejů, takže budete muset poskytnout návrhy na identitu obličeje jinou metodou. Na to, k čemu je tento plugin určen, však dělá docela dobře. Doporučuji vám to zkusit!