말랑말랑제리스타일
자바스크립트에서 Open CV 사용하기(Opencv.js) 본문
자바스크립트에서 손쉽게 Open CV를 사용할 수 있는데요. 아무래도 Open CV가 기능이 많다 보니 로딩하는 데에 속도가 오래 걸리긴 하지만 이미지 프로세싱을 손쉽게 하는 데는 Open CV만한 라이브러리가 없죠.
HTML로 Open CV 사용한 페이지 작성
처음으로 할 일은 HTML 파일을 만들고 Open CV를 불러오는겁니다.
참고로 오늘은 설치가 필요없는 프로젝트로 메모장 코딩으로 해볼겁니다.
사실상 크게 VS Code 기능이 필요가 없긴 한데 당연히 깔려있다면 VS Code로 작성하시는게 편하겠죠.
먼저 새로 폴더를 만들고 폴더 안에 새로만들기- 텍스트 파일을 눌러서 index.html로 파일 명을 지정해줍니다.
그리고 상단 캡처한 것처럼 메모장으로 index.html 파일을 열어주세요.
당연히 아무것도 없죠.
이제 OpenCV 공식 페이지의 OpenCV.js 튜토리얼 페이지로 갑시다.
하단 링크 클릭하시면 됩니다.
https://docs.opencv.org/4.8.0/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
Open CV 공식 페이지의 OpenCV.js 튜토리얼 페이지로 들어가면 보이는 Instrcution Opencv.js로 들어가서 Using OpenCV.js를 눌러줍니다.
들어가면 Create Web Page 코드가 나오고 뭐가 줄줄줄 나오죠?
맨 밑으로 가주세요.
Try it 바로 위에 전체 소스코드가 보입니다.
<!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 src="opencv.js" type="text/javascript"></script>
</body>
</html>와 보기 좋게 제가 복사해왔네요.
이 내용을 아까 열어두었던 index.html 파일 안에 붙여넣어주세요.
붙여넣었다면 저장하고 파일을 닫아줍니다.
그리고 index.html을 크롬의 새로운 탭 옆에 드래그해보세요.
아이콘이 크롬 모양이면 그냥 더블클릭해서 열어도 됩니다.
열어보면 우와 뭐가 나오죠? 그런데 OpenCV.js is loading이 바뀌지 않습니다.
개발자 도구를 사용할 줄 아는 분이라면 F12를 눌러보면 힌트를 얻을 수 있을텐데요.
파일이 하나가 없답니다.
OpenCV.js 파일 다운받아서 추가하기
상단의 소스를 유심히 보신 분들은 아시겠지만 밑에서 세번째 줄에 이렇게 돼있습니다.
<script async src="opencv.js" type="text/javascript"></script>async 즉, 비동기로 opencv.js 파일을 불러와야하는데 우리 PC에는 현재 이 파일이 없죠.
그래도 걱정하실게 없습니다. Open CV 공식 페이지에서 손쉽게 파일을 받을 수 있거든요.
다시 앞에서 코드를 복사한 Open CV 공식 홈페이지로 가줍니다.
안타깝게도 창을 닫은 분들은 하단의 링크로 들어가주세요.
https://docs.opencv.org/4.8.0/d0/d84/tutorial_js_usage.html
OpenCV: Using OpenCV.js
Steps In this tutorial, you will learn how to include and start to use opencv.js inside a web page. You can get a copy of opencv.js from opencv-{VERSION_NUMBER}-docs.zip in each release, or simply download the prebuilt script from the online documentations
docs.opencv.org
Steps를 잘 읽어보면 영어입니다.
네 영어 몰라도 되고 Steps의 밑에서 두번째 줄에 For Example 뒤에 링크가 하나 있죠.
https://docs.opencv.org/4.5.0/opencv.js 라고 되어있을텐데요.
이걸 클릭하지 말고 우클릭해서 다른 이름으로 링크 저장 버튼을 눌러줍니다.
아까 만든 index.html 파일이 있는 폴더 안에 파일 이름을 바꾸지 말고 opencv.js로 그대로 저장해줍니다.
만약 다른게 붙어있다면 opencv.js로 파일 명을 바꿔주시면 됩니다.
다시 아까 그 폴더로 들어가면 index.html 파일과 opencv.js 파일이 같이있죠.
index.html 파일을 아까와 같은 방식으로 열어줍니다.
들어가서 잠깐 기다리면 OpenCV.js is ready로 문구가 바껴있습니다.
파일 선택을 눌러 아무 이미지 파일이나 하나 열어보시면 canvas.Output에 동일한 이미지가 나오죠?
아직 처리해준게 없어서 동일한 이미지가 나온겁니다.
자바스크립트용 Open CV 흑백 이미지로 변환하기
자 이제 간단한 테스트로 불러온 이미지를 흑백 이미지로 변환해보겠습니다. 말이 흑백이지 실제 컴퓨터 비전에서는 Gray Scale이라고 부르죠.
다시 index.html 파일을 메모장으로 열어줍니다.
소스코드 밑에서 15번째 줄을 보면 하단과 같은 소스가 있을겁니다.
imgElement.onload = function() {
let mat = cv.imread(imgElement);
cv.imshow('canvasOutput', mat);
mat.delete();
};이게 뭐냐면 mat라는 클래스의 open CV 객체에다가 이미지를 집어넣고 그 mat 객체를 그대로 output에 보여주는 소스입니다.
여기다 간단한 처리를 하나 해줄겁니다.
mat2라는 Mat 객체를 하나 만들어주고 색상 스케일을 RGB 스케일에서 Gray Scale 즉, 흑백 이미지로 바꿔넣은 뒤 이걸 보여줄겁니다.
imgElement.onload = function() {
let mat = cv.imread(imgElement);
let mat2 = new cv.Mat();
cv.cvtColor(mat,mat2, cv.COLOR_RGBA2GRAY,0);
cv.imshow('canvasOutput', mat2);
mat.delete();
mat2.delete();
};이렇게 바꿔주면 되겠죠.
앞서 설명한 내용들이고, delete는 놔두면 메모리 오버가 날 수 있으니 화면에 보여주고 나서 바로 없애주는겁니다.
자 이렇게 바꿔주고 다시 저장한 뒤 index.html 파일을 크롬에서 열어주세요.
파일 열기로 파일을 선택하면 이미지가 흑백으로 변한 것을 볼 수 있을겁니다.
지금까지 코딩이라고 할만한 건 중간에 흑백으로 바꿔준게 거의 전부죠?
이렇게 간단하게 자바스크립트에서 OpenCV를 이용해서 이미지 프로세싱이 가능합니다.
'프로그래밍 > OpenCV 영상처리' 카테고리의 다른 글
| 파이썬 opencv 설치하고 테스트하기 (0) | 2022.02.18 |
|---|---|
| [OpenCV 공부방]간단한 이미지 회전 Rotate 함수의 구조 (0) | 2021.07.03 |
