[opencv] 공부 (1)

2018. 10. 7. 05:16

잠깐 쓸데가 있어서 openCV로 이미지 인식에 대한 공부 시작.

나중에 혹시 까먹을/다시 해야할 날을 대비해서 기록.


node.js 서버 이용, openCV.js 레퍼런스 페이지를 보고 따라서 함.



1. opencv.js 다운로드 https://docs.opencv.org/master/opencv.js




2. 페이지를 띄운 후 적당히 그림하나를 추가함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello OpenCV.js</title>
</head>
<body>
<h2>Hello OpenCV.js</h2>
<div>
  <div class="inputoutput">
    <img id="imageSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></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);
</script>
</body>
</html>
cs

3. opencv를 이용해서 한 셀을 만들어서 그림을 보여주는 영역을 만듬. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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">
  <table>
  <tr>
    <td>
    <img id="imageSrc" alt="No Image" />
    <div class="caption">imageSrc <input type="file" id="fileInput" name="file" /></div>
    </td>
    <td>
    <!-- 1. opencv canvas -->
    <canvas id="canvasOutput" ></canvas>
    <div class="caption">canvasOutput</div>
    </td>
  </tr>
  </table>
  </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);
 
//2. image showing using opencv script
imgElement.onload = function() {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>
<!-- 3. opencv script loading -->
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>
cs





+ Recent posts

티스토리툴바