티스토리 뷰
openCV는 Open Source Computer Vision의 약자로 영상,이미지 처리에 사용할 수 있는 오픈 소스 라이브러리이다.
머신러닝 관련 부분에도 활용도를 높여가고 있다.
openCV.js 사용
opencv.js의 사본을 얻는 방법으로 https://docs.opencv.org/4.5.0/opencv.js 를 참고하였다.
코드는 https://docs.opencv.org/4.x/d0/d84/tutorial_js_usage.html 을 참고하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<p id="status">OpenCV.js is loading...</p>
<div>
<div class="inputoutput">
<img id="imageSrc" alt="No Image"/>
<div class="caption">imageSrc
<input type="file" id="fileInput" name="file"/></div>
</div>
<div class="inputoutput">
<canvas id="canvasOutput"></canvas>
<div class="caption">canvasOutput</div>
</div>
</div>
<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);
cv.imshow('canvasOutput', mat);
mat.delete();
};
var Module = {
// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document
.getElementById('status')
.innerHTML = 'OpenCV.js is ready.';
}
};
</script>
<script async="async" src="opencv.js" type="text/javascript"></script>
</body>
</html>openCV Template Matching
사용자의 입력 이미지에서 머신러닝 없이 원하는 부분의 객체가 어디에 위치하는지 알아보다 openCV template matching 방법을 알게 되었다.
태그 html 요소
이미지를 업로드하고 비교할 대상의 이미지를 받기위해 2개의 캔버스 타입을 만들었으며 결과물을 보여줄 캔버스도 만들었다.
<p id="status">OpenCV.js is loading...</p>
<div class="inputImgByUser" style="display: flex; border: 2px solid black;">
<img id="imageSrc" alt="No Image" />
<div class="caption"> imageSrc <input type="file" id="imgInput" name="file" /></div>
<canvas id="canvas"></canvas>
<div class="caption">canvasOutput</div>
</div>
<br/>
<div class="templateImg" style="display: flex; border: 2px solid black;">
<img id="templateSrc" alt="No Image" />
<div class="caption"> templateSrc <input type="file" id="templInput" name="file" /></div>
<canvas id="template"></canvas>
<div class="caption">templateOutput</div>
</div>
<br/>
<div style="border: 2px solid black;">
<canvas id="rect">
<div class="caption">rectangle into canvas</div>
</canvas>
</div>
<button style="width: 100pt; height: 60pt;"viewImg" onclick="clickButton()">Template Matching Result</button>태그 js 요소
// insert image into image canvas
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('imgInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function () {
let mat = cv.imread(imgElement);
cv.imshow('canvas', mat);
mat.delete();
};
// insert image into template canvas
let templateElement = document.getElementById('templateSrc');
let inputElement_templ = document.getElementById('templInput');
inputElement_templ.addEventListener('change', (e) => {
templateElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
templateElement.onload = function () {
let mat = cv.imread(templateElement);
cv.imshow('template', mat);
mat.delete();
};
function clickButton() {
let src = cv.imread('canvas');
let templ = cv.imread('template');
let dst = new cv.Mat();
let mask = new cv.Mat();
cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF, mask);
let result = cv.minMaxLoc(dst, mask);
let maxPoint = result.maxLoc;
let color = new cv.Scalar(255, 0, 0, 255);
let point = new cv.Point(maxPoint.x + templ.cols, maxPoint.y + templ.rows);
cv.rectangle(src, maxPoint, point, color, 2, cv.LINE_8, 0);
cv.imshow('rect', src);
src.delete();
dst.delete();
mask.delete();
}
//opencv가 작동되는지
var Module = {
// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document
.getElementById('status')
.innerHTML = 'OpenCV.js is ready.';
}
};세세한 부분에서의 정확도는 떨어지는 것 같지만 화면의 대부분을 차지하는 이미지의 경우 제대로 판단하는 것 같다.
입력화면
출력화면
전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>opencv tutorial</title>
</head>
<body>
<p id="status">OpenCV.js is loading...</p>
<div class="inputImgByUser" style="display: flex; border: 2px solid black;">
<img id="imageSrc" alt="No Image" />
<div class="caption"> imageSrc <input type="file" id="imgInput" name="file" /></div>
<canvas id="canvas"></canvas>
<div class="caption">canvasOutput</div>
</div>
<br/>
<div class="templateImg" style="display: flex; border: 2px solid black;">
<img id="templateSrc" alt="No Image" />
<div class="caption"> templateSrc <input type="file" id="templInput" name="file" /></div>
<canvas id="template"></canvas>
<div class="caption">templateOutput</div>
</div>
<br/>
<div style="border: 2px solid black;">
<canvas id="rect">
<div class="caption">rectangle into canvas</div>
</canvas>
</div>
<button style="width: 100pt; height: 60pt;"viewImg" onclick="clickButton()">Template Matching Result</button>
<script type="text/javascript">
// insert image into image canvas
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('imgInput');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function () {
let mat = cv.imread(imgElement);
cv.imshow('canvas', mat);
mat.delete();
};
// insert image into template canvas\
let templateElement = document.getElementById('templateSrc');
let inputElement_templ = document.getElementById('templInput');
inputElement_templ.addEventListener('change', (e) => {
templateElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
templateElement.onload = function () {
let mat = cv.imread(templateElement);
cv.imshow('template', mat);
mat.delete();
};
function clickButton() {
let src = cv.imread('canvas');
let templ = cv.imread('template');
let dst = new cv.Mat();
let mask = new cv.Mat();
cv.matchTemplate(src, templ, dst, cv.TM_CCOEFF, mask);
let result = cv.minMaxLoc(dst, mask);
let maxPoint = result.maxLoc;
let color = new cv.Scalar(255, 0, 0, 255);
let point = new cv.Point(maxPoint.x + templ.cols, maxPoint.y + templ.rows);
cv.rectangle(src, maxPoint, point, color, 4, cv.LINE_8, 0);
cv.imshow('rect', src);
src.delete();
dst.delete();
mask.delete();
}
//opencv가 작동되는지
var Module = {
// https://emscripten.org/docs/api_reference/module.html#Module.onRuntimeInitialized
onRuntimeInitialized() {
document
.getElementById('status')
.innerHTML = 'OpenCV.js is ready.';
}
};
</script>
<script async="async" src="opencv.js" type="text/javascript"></script>
</body>
</html>참고사이트
https://docs.opencv.org/4.x/d5/d10/tutorial_js_root.html
OpenCV: OpenCV.js Tutorials
Core Operations In this section you will learn some basic operations on image, some mathematical tools and some data structures etc.
docs.opencv.org
'📦 개발 > opencv' 카테고리의 다른 글
| [opencv] 보드판 생성 (0) | 2023.01.31 |
|---|---|
| [opencv] 이미지 처리 궁금한 것 정리 (0) | 2023.01.28 |
| [opencv] opencv.js Getting Started with Images (0) | 2023.01.15 |