[Node.js] openCV로 이미지 유사도 검사하기 ( opencv 모듈 )

1. openCV ( Open Source Computer Vision ) 란?

openCV는 오픈소스 컴퓨터 비전 라이브러리이며, 얼굴, 물체, 제스처 등을 인식 할 수 있는 기능을 제공합니다.

예를 들면, 회원 가입을 할 때 우리 학교 학생만을 회원으로 받고 싶은 경우가 있습니다.

그 중 한 방법으로 opencv를 활용하여, 위와 같은 학생증 사진을 업로드하도록 요청한 후, 업로드한 학생증 이미지가 우리 학교 학생증이 맞는지 그 유사도를 검사할 수 있습니다.

이런 식으로 openCV는 두 사진의 유사도를 검사할 수 있는 기능을 제공합니다.

그 밖에 opencv는 더 많은 기능들이 있는데, 이 글에서는 유사도를 검사하는 방법에 대해서 알아보도록 하겠습니다.

더 많은 기능은, opencv 모듈 에서 지원하는 API를 찾아보시면 좋을 것 같습니다. ( 링크 )

2. openCV 설치

Node.js에서 openCV를 사용하려면 opencv 모듈을 설치해야 하는데,

opencv 모듈을 설치하기 위해서는 openCV를 설치해야 합니다.

1) opencv 공식 사이트에서 openCV 2.4.13.4 버전을 설치합니다.

2) 설치를 진행하고, 생성된 OpenCV 폴더를 C드라이브로 옮깁니다. (  C:\OpenCV  )

3)  내 컴퓨터 - 속성 - 고급 시스템 설정 - 환경변수

• (1) 시스템 변수 새로 만들기 클릭
• 변수 이름 : OPENCV_DIR
• 변수 값    : C:\OpenCV\build\x64\vc14

• (2) 사용자 변수에서 PATH 클릭 - 편집 - 변수 값
• 기존의 값들은 그대로 둔 상태에서 %OPENCV_DIR%\bin; 작성
• 세미콜론(;)은 구분 기호이기 때문에 기존에 작성된 내용 뒤에는 세미콜론이 있어야 합니다.

위의 두 과정을 마친 후, 확인 버튼을 눌러 환경 변수 설정

4) 시스템 재부팅

5)

opencv 깃헙 페이지를 보면, Visual Studio로 뭔가를 하라고 합니다.

Visual Studio를 설치하는 방법외에 다른 방법으로는 windows-build-tools 모듈을 설치하는 방법이 있습니다. ( 깃헙링크 )

# npm install --global --production windows-build-tools

6) 이제 openCV 설치가 완료되어있으니 opencv 모듈을 설치하겠습니다.

# npm install opencv 

*** 에러 해결 ***

1)

opencv 모듈 설치중 OPENCV_DIR 에러가 발생한다면, 시스템 변수가 등록되지 않은 것입니다.

커맨더 창에서 set 명령어를 실행하여 환경변수가 제대로 등록되어 있는지 확인해주세요.

환경변수 설정 후 재부팅을 안하셨으면 재부팅을 해주세요.

2)

그래도 에러가 발생한다면, node-gyp 모듈을 설치합니다. ( 깃헙링크 )

# npm install -g node-gyp

저는 opencv를 사용하는 것보다, 설치하는 부분에서 많은 고생을 했었습니다...

제 환경에서는 위의 경우에 대한 오류만을 접해봤기 때문에 모든 경우를 다룰 수 없는 점 양해드립니다.

3. openCV 테스트

openCV를 사용하는 간단한 예제를 보도록 하겠습니다.

express-generator로 스켈레톤을 구성하고, 라우터에 아래의 코드를 작성합니다.

/routes/index.js

const express = require('express');
const router = express.Router();
const cv = require("opencv")

/* GET home page. */
router.get('/', function(req, res, next) {
  cv.readImage(__dirname + '/../public/images/foo.png', function (err, img) {
    if (err) throw err;

    let width = img.width();
    let height = img.height();
    if (width < 1 || height < 1) {
      throw new Error('Image has no size');
    }

    img.convertGrayscale();
    img.gaussianBlur([3, 3]);
    img.save(__dirname + '/../public/img/newFoo.png');
  })

  res.render("index",{ title: "express"})
});

module.exports = router;

opencv 모듈 객체의 readImage() 메서드를 호출하면 이미지 파일을 불러올 수 있습니다.

• 첫 번째 인자로 절대 경로를 전달하고,
• 두 번째 인자는 콜백함수로써, 이미지 파일( img 객체 )을 전달합니다.

위의 코드를 수행하기 위해서는

• public 폴더에 img 폴더를 생성해야 합니다.
• public/images 폴더에 foo.png 이미지 파일이 있어야 합니다.

파일과 폴더가 준비되었으면, 이제 서버를 실행하여 브라우저에서 localhost:3000에 접근해보세요.

그리고 나서 public/img/newFoo.png 파일을 확인해보세요 !

특별한 것 없이 원본 사진이 흑백으로 처리되었습니다.

4. 두 사진의 유사도 비교하기

그러면 이제, 이번 글의 목적인 두 사진의 유사도를 검사하는 코드를 작성해보도록 하겠습니다.

opencv 모듈을 설치하면 /node_modules/opencv/examples 폴더가 생성됩니다.

이 폴더에는 openCV를 활용할 수 있는 많은 예제 코드가 존재합니다.

그 중에서 dissimilarity.js 파일을 보시면, 두 사진의 유사도를 검사하는 코드가 있는데, 단 한 줄입니다.

사용 방법은 ImageSimilarity() 메서드를 호출할 때, 비교할 두 사진을 인자로 전달하면 됩니다.

이를 참고해서 결과를 직접 확인해보도록 하겠습니다.

위에서 작성한 /routes/index.js를 수정하도록 하겠습니다.

router.get('/', function(req, res, next) {
  cv.readImage(__dirname + '/../public/img/img1.png', function (err, img1) {
    if (err) throw err;

    cv.readImage(__dirname + '/../public/img/img2.png", function(err, img2) {
    if (err) throw err;

    cv.ImageSimilarity(img1, img2, function (err, dissimilarity) {
      if (err) throw err;
      console.log('Dissimilarity: ', dissimilarity);
    });
  });
});
res.render("index",{ title: "express"})
});
module.exports = router;

코드를 실행하기 위해서는 img1.png 파일과 img2.png 파일이 public/img 폴더에 존재해야 합니다.

그리고 두 사진의 크기는 꼭 일치할 필요는 없지만 어느 정도 비슷해야 합니다.

크기 차이가 심한 경우 에러가 발생하며, 유사도가 정확하지 않을 수도 있습니다.

저는 위의 두 사진을 비교하여 유사도를 확인해보려 합니다.

서버를 실행하고 브라우저에서 localhost:3000을 요청하면, 유사도가 95%임을 확인할 수 있습니다.

지금은 우연히 정수가 출력 되었는데 몇 번 테스트를 해본 결과 소수점 6자리까지 보여줬던 것 같습니다.

이상으로 openCV를 설치하는 방법과 openCV로 이미지를 활용하는 방법에 대해 알아보았습니다.

openCV는 컴퓨터 비전과 관련한 많은 기능을 제공합니다.

더 많은 어떤 기능이 있는지는 node_modules\opencv\examples 폴더에서 예제를 찾아보시거나, opencv API를 문서를 찾아보시면 좋을것 같습니다.

[ 참고 ]

http://programmerpsk.tistory.com/131