공돌이 잡학블로그

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>
Colored by Color Scripter
cs

잠깐 쓸데가 있어서 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>
Colored by Color Scripter
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>
Colored by Color Scripter
cs

구글 컴퓨트 엔진 (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
 
Colored by Color Scripter
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
Colored by Color Scripter
cs

VNC 재접속을 하면 아래와 같이 그나마 친숙한 화면이 나온다.

... 힘들다 나머진 다음에 하자.

'웹게임 크롤러 만들기' 카테고리의 다른 글

[python] 크롤러 예제 (0)	2018.10.28
eRepublik 크롤링 페이지 만들기 (0)	2018.09.01

node.js 공부할 겸, 심심풀이 할 겸 웹게임 크롤링 페이지를 하나 만들려고 한다.

이고브, http://egov4you.org/

이립박스, http://erepbox.russianwill.ru/

같은 크롤링 사이트 하나 만드는 것이 목표.

'웹게임 크롤러 만들기' 카테고리의 다른 글

[python] 크롤러 예제 (0)	2018.10.28
구글 클라우드 서비스 이용 (VPS) 및 GUI 작업환경 설정 (1)	2018.09.02

기나긴 학생 시절을 뒤로하고 사회로 첫 발을 내딛는 공돌이의 일상 및 취미 블로그.

공돌이 잡학블로그

Menu

Category

Notice

Recent comments

Links

[opencv] 공부 (2) - opencv를 이용한 그림 수정

[opencv] 공부 (1)

구글 클라우드 서비스 이용 (VPS) 및 GUI 작업환경 설정

'웹게임 크롤러 만들기' 카테고리의 다른 글

eRepublik 크롤링 페이지 만들기

'웹게임 크롤러 만들기' 카테고리의 다른 글

블로그 소개

+ Recent posts

티스토리툴바