-
초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_2Study/JavaScript 2024. 3. 8. 18:04반응형
저번 컨텐츠에 이어서 이번에는 openCV.js 활용하여 이미지의 얼굴을 인식하는 기능을 만들어 보자!
(참고로 openCV 가 초면이신 분들은 아래 링크 타고 쓱 읽어보고 오시면 이해하는데 좋음요.)
https://cbn1218.tistory.com/54
초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_1
회사에서 얼굴인식 관련 라이브러리를 찾아보라는 임무가 주어짐. 빅데이터와 딥런닝 관련된거라 손도 못대겠구나 생각했으나(쉽다는거 아님...매우어려움...) 아주 낮은 수준으로 openCV.js 가져
cbn1218.tistory.com
일단 이미지에 인식이 되는지 궁금하니 결과 부터 ㄱㄱ
1. 결과
이미지를 넣으면 사람들얼굴을 인식하여 빨간색 네모칸을 그려줌.
결과이미지를 보면 아시겠지만, 모든 얼굴을 인식하는건 아니고 아래를 보고 있거나 위를 보고있거나 얼굴이 반쪽이 짤렸거나 하면 인식을 못함. 대체적으로 정면으로 인식된 얼굴만 인식을 하고 있는거 같음.
정확도는 높지는 않으나, 쨋든 얼굴은 인식을 하고 있으니 토이프로젝트에 활용하여 간단한 기능을 구현하는데는 문제가 없는거 같음.
2. 설명
앞서 잠깐 설명한것처럼 openCV는 딥런닝과 연계하여 영상을 처리 하는 오픈소스로 사전에 학습된 모델이 필요한데,
이 컨텐츠에서는 HaarCascade 모델을 이용하여 이미지속 얼굴을 인식할 예정 임.
(1) html 코드
<body> <h2>openCV를 활용한 얼굴인식</h2> <p id="status">OpenCV.js is loading...</p> <div class="box"> <div class="inputoutput"> <img id="imageSrc" src="" alt="No Image" /> <div class="caption">원본사진 <input type="file" id="fileInput" name="file" /></div> </div> <div class="inputoutput"> <canvas id="grayImg" ></canvas> <div class="caption">회색변경</div> </div> <div class="inputoutput"> <canvas id="facedetectedImg"></canvas> <div class="caption">안면인식</div> </div> </div> <script src="utils.js"></script> <script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script> </body>html 코드 중 제일 중요한 부분은 script src 부분!
openCV 를 사용할려고 하면 openCV.js 파일 과 utils.js 파일을 받아 연결 시켜야함. 필요하시믄 아래 js파일 다운!
opencv.js7.32MButils.js0.01MB(참고로 이코드의 easycoding 의 유튜브 강의를 보고 참고하여 좀더 단순화 시켜 부트스트랩 부분을 제거한 코드임.
좀더 영상인식에 대해 알고싶다 하시면 easycoding 님 유튜브 가보면 좋은 강의가 많움)
(2) css코드
<style> .box{ display: flex; } .inputoutput>img{ width: 300px; height: 400px; } </style>딱히 설명할거 없음...css은 필요에의해서 설정하면 될듯...
(3) javaScript 코드
<script type="text/javascript"> let imgElement = document.getElementById('imageSrc'); let inputElement = document.getElementById('fileInput'); inputElement.addEventListener('change', (e) => { imgElement.src = URL.createObjectURL(e.target.files[0]); }, false); imgElement.onload = function() { let mat = cv.imread(imgElement); let gray = new cv.Mat(); cv.cvtColor(mat, gray, cv.COLOR_RGB2GRAY, 0); //openCV 가 회색으로 변환해 주는 객체 cv.imshow('grayImg', gray); try { classifier.detectMultiScale(gray, faces, 1.1, 3, 0); //gray로 변환된 메트리스에서 실제로 얼굴을 찾아내어 직사각형 표시하는 부분 console.log("얼굴이 몇개?"+faces.size()); // 검출된 얼굴이 몇개인지 출력 }catch (err) { console.log("Error: " + err); } for(let i = 0; i < faces.size(); i++){ let face = faces.get(i); let point1 = new cv.Point(face.x, face.y); //사각형을 그리기 위한 시작점 let point2 = new cv.Point(face.x + face.width, face.y + face.height); //사각형을 그리기 위한 끝점 cv.rectangle(mat, point1, point2, [255, 0, 0, 255]); //시작점과 끝점을 기준으로 사작형 그리기 } cv.imshow("facedetectedImg", mat); mat.delete(); }; let faces; let classifier; let utils; function onOpenCvReady() { cv['onRuntimeInitialized'] = () => { faces = new cv.RectVector(); //안면인식때 얼굴을 직사각형으로 추출할때 쓰이는 객체 classifier = new cv.CascadeClassifier(); //얼굴을 검출하는 검출기 객체 utils = new Utils('errorMessage'); //파일을 불러오는 객체 let faceCascadeFile = 'haarcascade_frontalface_default.xml'; // 전면얼굴을 사전에 훈련된 모델 데이터 (학습을 시켜야 되는데, 이때 딥러닝이 필요함) utils.createFileFromUrl(faceCascadeFile,faceCascadeFile, () => { classifier.load(faceCascadeFile); //검출기를 로드 하고 학습된 모델을 넣어줌 document.getElementById('status').innerHTML = '데이터 로딩이 완료되었습니다. 이제 변환할 사진을 업로드 하세요'; }) } } </script>젤 중요한 자바스크립트 코드!
큰 흐름만 설명하자면
페이지를 열면 onOpenCvReady() 실행
→ openCV.js 에 정의된 onRuntimeInitialized 모듈?! 이 실행 되는데, 이때 얼굴을 인식하는 검출기?! 와 사전에 훈련된 HaarCascade 모델을 로딩시켜 얼굴인식을 할수 있는 초기세팅을 하는 작업을 함.
→ 초기 설정이 되면 '데이터 로딩이 완료되었습니다. 이제 변환할 사진을 업로드 하세요' 문구가 뜸.
→ fileInput 이 변경이 생기면 inputElement.addEventListener('change', (e) => {}) 함수가 실행이 되고,
→ 그안에 있는 imgElement.src 가 변경이 되면서 imgElement.onload 함수가 실행 됨.
→ imgElement.onload 함수안에 openCV를 불러내어 이미지를 읽은뒤에 그레이스케일(GrayScale)로 변환하고
→ 얼굴을 인식하여 canvas 를 이용하여 빨간네모칸을 만들어 표시함.자세한 설명은 주석으로 적어놨으니 참고하시길!
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_1 (0) 2024.04.25 초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능) (0) 2024.03.14 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_1 (0) 2024.03.08 초보자를 위한 웹브라우져에 웹캠 비디오 영상 보여주기 (0) 2024.03.07 초보자를 위한 게시판의 글자색을 바꾸는 기능을 만들어 보자 (0) 2024.02.05