>  기사  >  웹 프론트엔드  >  자바스크립트 얼굴인식 기술에 대해 이야기해보자

자바스크립트 얼굴인식 기술에 대해 이야기해보자

coldplay.xixi
coldplay.xixi앞으로
2020-07-06 16:33:272945검색

자바스크립트 얼굴인식 기술에 대해 이야기해보자

저는 예전부터 인공지능 인식 기술에 관심이 많았어요. 어떤 알고리즘인지, 어떤 분석 과정인지 상상이 안 가거든요. 음성인식이든, 얼굴인식이든, 다른 종류의 인식이든 사람의 외모와 말하는 방식이 너무 다르기 때문에 사진을 찍는 방식도 다르고 이런 인식 기술이 어떻게 작동하는지 이해할 수 없습니다. 자바스크립트 누드인식 기술이 이전에 소개된 바 있고, '마스크'라는 게임도 이 인식 기술을 사용하고 있기 때문에 얼굴인식 기술도 연구해야 한다고 생각한다. Facebook은 이 기술을 사용하며 제스처 제어에도 사용할 수 있으므로 웹사이트에 이를 위한 공간이 있을 것입니다.

얼굴 인식에 사용할 수 있는 JavaScript 패키지 중 하나는 Jay Salvat와 Liu Liu가 개발한 얼굴 감지입니다. 제공된 이미지를 분석하고 발견된 모든 얼굴 이미지의 좌표를 반환하는 표준 jQuery 플러그인입니다. 어떻게 사용되는지 살펴보겠습니다!

jQuery.faceDetection

얼굴 인식 jQuery 플러그인을 사용하려면 4개의 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>

이 얼굴 인식 플러그인의 처음 두 파일은 배열 객체를 얻을 수 있는 다양한 기능 프로그램입니다. 이러한 개체는 사진의 얼굴 좌표 정보를 저장합니다. 예를 들면 다음과 같습니다.

var coords = jQuery("#myImage").faceDetection();
/* 返回:
	{
		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,
	}
*/

감지 방법에 이벤트 콜백 기능을 추가할 수도 있습니다.

var coords = jQuery("#myImage").faceDetection({
	complete: function(image, coords) {
		// Do something
	},
	error: function() {
		console.warn("无法分析图片");
	}
});

인식된 얼굴 정보에 대해 모든 처리를 수행할 수 있습니다. 사진 속 얼굴 주위에 프레임을 그릴 수 있습니다:

jQuery("img").each(function() {
	var img = this;
	// 获取脸部坐标
	var coordinates = jQuery(img).faceDetection();
	// 在脸上画出框线
	if(coordinates.length) {
		coordinates.forEach(function(coord) {
			jQuery("<p&gt", {
				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);
		});
	}
});

이것은 매우 간단하지만 추출과 같은 복잡한 처리도 할 수 있습니다.

얼굴 인식을 위해 다양한 사진을 활용해 보았는데, 예상대로 결과가 완벽하지 않았습니다. 하지만 그럼에도 불구하고 여전히 꽤 좋습니다. 이는 매우 간단한 스크립팅 기술이며 완벽한 기술은 없습니다. 본 얼굴 인식 플러그인에는 얼굴 비교 기능이 없습니다. 이 기능을 사용하려면 다른 방법을 사용하고 얼굴 특징 정보를 제공해야 합니다. 전체적으로 꽤 괜찮습니다. 꼭 시도해 보시기를 적극 권장합니다.

관련 학습 권장사항: javascript 비디오 튜토리얼

위 내용은 자바스크립트 얼굴인식 기술에 대해 이야기해보자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 webhek.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제