디아블로4 경매 사이트 만들기 (6) - OpenCV.js Image ROI

개요

https://4sii.tistory.com/608

디아블로4 경매 사이트 만들기 (5) - OpenCV.js Template Matching

이전 포스팅에서 opencv의 Template Matching 기능을 통해

미리 세팅해놓은 테두리 이미지와 일치하는 부분을 찾는 과정까지 진행해봤다. 

 

이번에는 찾아낸 일치하는 부분을 tesseract를 통해 텍스트 인식을 시키기 위해

따로 잘라낼 건데 이 잘라내는 기능 역시 opencv의 Image ROI 기능을 사용했다. 
(*ROI는 Region of Interest의 줄임말로 내가 관심있는 부위라고 직역할 수 있다.)

https://docs.opencv.org/3.4/de/d06/tutorial_js_basic_ops.html

OpenCV: Basic Operations on Images

 

준비

Template Matching 코드에서 얻은 maxPoint 변수의 x, y 값이

매칭으로 찾은 부위의 시작 좌표인 것을 알 수 있었는데 이걸 이용해 잘라낼 사각형의 크기를 계산하면 다음과 같다.

이를 통해 Template Matching 코드와 Image ROI 코드를 적절히 활용하면 다음과 같이 작성할 수 있다.

 

코드

let src = cv.imread(imgElement);
let testImgElement = document.getElementById('templImageSrc');
let templ = cv.imread(testImgElement);
let dst = new cv.Mat();
let mask = new cv.Mat();

// Template Matching
cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF, mask);
let result = cv.minMaxLoc(dst, mask);
let maxPoint = result.maxLoc;

// Image ROI
let rect = new cv.Rect(maxPoint.x, maxPoint.y, templ.cols, src.rows - maxPoint.y);
dst = src.roi(rect);

// 결과 출력
cv.imshow('canvasOutput', dst);

src.delete(); dst.delete(); mask.delete();

 

결과

여러 이미지로 테스트를 진행한 결과 모두 성공적인 결과를 얻을 수 있었다.

이제 잘라낸 이미지로 텍스트 인식을 해보자