JavaScript로 얼굴 인식을 구현하는 방법-JS 튜토리얼-php.cn

JavaScript로 얼굴 인식을 구현하는 방법

伊谢尔伦

풀어 주다： 2016-11-24 09:40:36

원래의

1458명이 탐색했습니다.

우리는 Eduardo Lundgren이 개발한 경량 자바스크립트 라이브러리인 Tracking.js를 배우기 시작했습니다. 이를 통해 실시간 얼굴 감지, 색상 추적, 친구 얼굴 태그 지정이 가능합니다. 이 튜토리얼에서는 정적 이미지에서 얼굴, 눈, 입을 감지하는 방법을 살펴보겠습니다.

저는 항상 영상과 사진 속 얼굴 태깅, 감지, 얼굴 인식 기술에 관심이 많았습니다. 얼굴 인식 소프트웨어나 플러그인을 개발하기 위한 논리와 알고리즘을 얻는 것이 상상을 초월한다는 것을 알고 있지만. Javascript 라이브러리가 미소, 눈, 얼굴 구조를 인식할 수 있다는 것을 알았을 때 영감을 받아 튜토리얼을 작성했습니다. 순수하게 Javascript를 기반으로 하거나 Java 언어를 기반으로 하는 라이브러리가 많이 있습니다.

오늘은 Eduardo Lundgren이 개발한 경량 자바스크립트 라이브러리인 Tracking.js를 배우기 시작합니다. 이 라이브러리를 사용하면 실시간 얼굴 감지, 색상 추적, 친구 얼굴 태그 지정이 가능합니다. 이 튜토리얼에서는 정적 이미지에서 얼굴, 눈, 입을 감지하는 방법을 살펴보겠습니다.

튜토리얼 마지막에는 팁과 힌트는 물론 자세한 기술 세부정보가 포함된 실제 예제를 제공하는 튜토리얼을 볼 수 있습니다.

먼저 프로젝트를 생성하고 github에서 프로젝트를 다운로드한 후 빌드 폴더를 추출하고 파일 및 디렉터리 구조에 따라 빌드 폴더를 배치해야 합니다. 이 튜토리얼에서는 다음과 같은 파일 및 디렉터리 구조를 사용했습니다.

폴더 구조

프로젝트 폴더

│

│ index.html

│

├───자산

│ face.jpg

│

└───js

추적-min.js

│ 추적.js │

└───data

eye-min.js

eye.j s

face-min.js

face.js

mouth-min.js

mouth.js

보시죠 js 폴더에는 Tracking.js에서 추출한 자바스크립트 파일이 포함되어 있습니다. 다음은 index.html의 html 코드입니다.

HTML 코드

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>@tuts Face Detection Tutorial</title>
 
  <script src="js/tracking-min.js"></script>
  <script src="js/data/face-min.js"></script>
  <script src="js/data/eye-min.js"></script>
  <script src="js/data/mouth-min.js"></script>
 
  <style>
  .rect { 
    border: 2px solid #a64ceb; 
    left: -1000px; 
    position: absolute; 
    top: -1000px; 
  } 
 
  #img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -173px 0 0 -300px; 
  } 
  </style>
</head>
<body>
<div class="imgContainer">
  <img  id="img" src="assets/face.jpg" / alt="JavaScript로 얼굴 인식을 구현하는 방법" >
</div>
 
</body>
</html>

로그인 후 복사

위 HTML 코드에는 추적.js 파일의 4가지 자바스크립트가 포함되어 있습니다. 이미지에서 얼굴, 눈, 입을 감지합니다. 이제 정적 이미지에서 얼굴, 눈, 입을 감지하는 코드를 작성합니다. 이 이미지는 다양한 표정과 포즈를 가진 여러 얼굴이 포함되어 있기 때문에 의도적으로 선택했습니다.

JavaScript로 얼굴 인식을 구현하는 방법 목표를 달성하려면 html 파일 헤더의 코드를 수정해야 합니다.

HTML 코드

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>@tuts Face Detection Tutorial</title>
 
  <script src="js/tracking-min.js"></script>
  <script src="js/data/face-min.js"></script>
  <script src="js/data/eye-min.js"></script>
  <script src="js/data/mouth-min.js"></script>
 
  <style>
  .rect { 
    border: 2px solid #a64ceb; 
    left: -1000px; 
    position: absolute; 
    top: -1000px; 
  } 
 
  #img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin: -173px 0 0 -300px; 
  } 
  </style>
// tracking code. 
<script>
    window.onload = function() { 
      var img = document.getElementById(&#39;img&#39;); 
 
      var tracker = new tracking.ObjectTracker([&#39;face&#39;, &#39;eye&#39;, &#39;mouth&#39;]); // Based on parameter it will return an array. 
      tracker.setStepSize(1.7); 
 
      tracking.track(&#39;#img&#39;, tracker); 
 
      tracker.on(&#39;track&#39;, function(event) { 
        event.data.forEach(function(rect) { 
          draw(rect.x, rect.y, rect.width, rect.height); 
        }); 
      }); 
 
      function draw(x, y, w, h) { 
        var rect = document.createElement(&#39;div&#39;); 
        document.querySelector(&#39;.imgContainer&#39;).appendChild(rect); 
        rect.classList.add(&#39;rect&#39;); 
        rect.style.width = w + &#39;px&#39;; 
        rect.style.height = h + &#39;px&#39;; 
        rect.style.left = (img.offsetLeft + x) + &#39;px&#39;; 
        rect.style.top = (img.offsetTop + y) + &#39;px&#39;; 
      }; 
    }; 
  </script>
 
</head>
<body>
<div class="imgContainer">
  <img  id="img" src="assets/face.jpg" / alt="JavaScript로 얼굴 인식을 구현하는 방법" >
</div>
 
</body>
</html>

로그인 후 복사

결과

JavaScript로 얼굴 인식을 구현하는 방법 코드 설명