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

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

coldplay.xixi
풀어 주다: 2020-07-06 16:59:43
앞으로
2987명이 탐색했습니다.

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

저는 예전부터 인공지능 인식 기술에 관심이 많았어요. 어떤 알고리즘인지, 어떤 분석 과정인지 상상이 안 가거든요. 음성인식이든, 얼굴인식이든, 다른 종류의 인식이든 사람의 외모와 말하는 방식이 너무 다르기 때문에 사진을 찍는 방식도 다르고 이런 인식 기술이 어떻게 작동하는지 이해할 수 없습니다. 자바스크립트 누드인식 기술이 이전에 소개된 바 있고, '마스크'라는 게임도 이 인식 기술을 사용하고 있기 때문에 얼굴인식 기술도 연구해야 한다고 생각한다. 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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿