[opencv] 공부 (2) - opencv를 이용한 그림 수정
1. 컬러를 그레이스케일로 (RGBA to Gray) https://docs.opencv.org/3.4/df/d24/tutorial_js_image_display.html
앞서 사용한 코드에 약간 수정을 해서, 출력 시 컬러를 그레이스케일로 바꾸는 코드를 적용했다.
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 49 50 51 52 53 54 55 56 57 | <!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="canvasInput" 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('canvasInput'); 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(); */ // 수정한 코드 (색값 변경) let src = cv.imread('canvasInput'); let dst = new cv.Mat(); cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY); cv.imshow('canvasOutput', dst); src.delete(); dst.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 |
[opencv] 공부 (1)
잠깐 쓸데가 있어서 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 |
구글 클라우드 서비스 이용 (VPS) 및 GUI 작업환경 설정
구글 컴퓨트 엔진 (Compute Engine)을 대여하여 간단한 서버를 하나 구축하기로 했다. 아마존 (AWS), 구글, 마소 (Azure) 세가지 대표적인 서비스 중에서 구글을 선택한 건 1년간 유효한 300달러치 무료 크레딧을 주기 때문.. 1년간 가장 작은 규모의 서버 (vCPU 1개 + 10기가 + 리눅스)를 미국 지역에 개설할 수 있다. 당분간 트래픽 적고 서버 구축엔 웹페이지 제작 작업만 할 것이기 때문에 충분할 것으로 생각한다.
운영체제는 리눅스 16.04 LTS 버전으로 정했다... 별 이유 없다. 그냥 node.js 패키지 설치를 지원하기 때문이다. (나도 잘 모른다....)
이어서 우분투에서 GUI 환경을 이용하기 위해 VNC란걸 설치한다.
1 2 | $ sudo apt-get install gnome-settings-daemon gnome-terminal metacity nautilus gnome-panel vnc4server | cs |
느려서 좀 걸린다... 중간에 하나 설치의향을 묻는게 있는데, 그냥 Y 입력하면 된다.
설치가 끝나면 실행을 위해 아래와 같이 입력.
1 | $ vnc4server | cs |
해당 서버에 접속하기 위해 VNC viewer를 설치한다. 본인 환경에 적합한 것을 고르면 된다. (https://www.realvnc.com/en/connect/download/viewer/)
아, 접속 전에 우선 구글에서 고정아이피 설정을 해줘야 한다. 안그러면 나중에 바뀔 수 있단다.
1. VPC 네트워크 --> 외부IP 주소 탭으로 들어가서
2. 고정아이피로 설정을 하면 된다. 빨간박스 부분이 서버의 아이피다. (내 아이피는 가렸다.)
추가로 방화벽 규칙으로 들어가서 VNC를 위한 포트가 열려있는지도 확인해본다.
새 규칙 만들기로 들어가서 아래 그림처럼 설정해준다. 특정 컴퓨터(단일아이피)만 사용해서 접속한다면 소스 IP 범위를 제한하면 조금 더 안전할 것 같다.
이후 VNC Viewer를 열어서 new connection에 아이피:1 을 입력하고 접속하면 된다. :1은 처음으로 설정 된 VNC 계정을 의미하며 이후로 1,2,3,4 이렇게 늘릴 수 있다. (위의 포트 또한 5900+번호, 6900+번호 순으로 열어주면 된다.)
근데 VNC viewer로 처음 접속하면 아래 그림처럼 회색화면만이 똻 하고 나를 반겨준다.... 환경설정을 해주자.
VNC 설정을 해본적이 없으니 다른 블로그를 보고 베꼈다. 다음 파일을 수정하자. ~/.vnc/xstartup
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | vnc4server -kill :1 //구동중인 VNC 종료. vi ~/.vnc/xstartup 기존 내용 삭제 후 아래 내용을 입력. export XKL_XMODMAP_DISABLE=1 unset SESSION_MANAGER unset DBUS_SESSION_BUS_ADDRESS [ -x /etc/vnc/xstartup ] && exec /etc/vnc/xstartup [ -r $HOME/.Xresources ] && xrdb $HOME/.Xresources xsetroot -solid grey vncconfig -iconic & gnome-panel & gnome-settings-daemon & metacity & nautilus & gnome-terminal & 저장 후 vnc 재실행 vnc4server | cs |
VNC 재접속을 하면 아래와 같이 그나마 친숙한 화면이 나온다.
... 힘들다 나머진 다음에 하자.
'웹게임 크롤러 만들기' 카테고리의 다른 글
[python] 크롤러 예제 (0) | 2018.10.28 |
---|---|
eRepublik 크롤링 페이지 만들기 (0) | 2018.09.01 |
eRepublik 크롤링 페이지 만들기
node.js 공부할 겸, 심심풀이 할 겸 웹게임 크롤링 페이지를 하나 만들려고 한다.
이고브, http://egov4you.org/
이립박스, http://erepbox.russianwill.ru/
같은 크롤링 사이트 하나 만드는 것이 목표.
'웹게임 크롤러 만들기' 카테고리의 다른 글
[python] 크롤러 예제 (0) | 2018.10.28 |
---|---|
구글 클라우드 서비스 이용 (VPS) 및 GUI 작업환경 설정 (1) | 2018.09.02 |
블로그 소개
기나긴 학생 시절을 뒤로하고 사회로 첫 발을 내딛는 공돌이의 일상 및 취미 블로그.