개발일지

opencv 이미지 처리 과정 중 궁금한 것들 정리해보려고 한다. 이미지에서 바둑판모양을 추출하려고 알아보니 다음과 같은 설명이 나왔다. 1. 왜 사진을 흑백이미지로 변환할까 ? - 컬러이미지의 경우 RGB 3개의 채널을 사용하는데 흑백 이미지의 경우 1개의 채널을 사용하기 때문에 이미지 처리 속도가 1/3 가량 빨라진다고 한다. - grayscale 로 변환하는 것 외로 HSV(색상, 명도, 채도), YUV(밝기, 색상차) 등이 있다. 2. blur 처리는 왜 하는 것일까 ? - 기존 이미지에 필터를 합성(2D convolution)하여 이미지를 변형하는데 노이즈를 제거하는데 유용하며 이미지가 매끈하게 보이는 효과를 낸다고하여 smoothing 이라고도 불린다. - 노이즈를 제거하는 방법으로는 평균을 ..

FCNN(Fully Connected Neural Network) 에서는 입력 데이터를 1차원 배열 형태로 한정하기 때문에 입력데이터의 공간정보를 손실할 수 있다. 그렇기에 입력데이터의 이미지 공간정보를 유지한 상태로 학습 후 FCNN을 거쳐 결과물을 얻어낼 수 있다. CNN은 이미지의 특징을 추출하는 부분과 클래스를 분류하는 부분으로 나누고 Convolution layer, Pooling layer를 여러 단계 거친다. Convolution Layer는 입력 데이터에 필터를 적용 후 활성화 함수를 반영해야 하며 pooling layer는 선택적이다. convolution, pooling layer를 거친 각각의 결과를 feature map이라고 한다. 1. Channel 컬러 이미지의 경우 픽셀을 rg..

opencv.js에서 어떻게 이미지를 읽고 웹에 표시하는지에 대해 공부해보았다. HTML HTML 요소는 다음과 같이 설정했다. click button READ an image opencv.js 는 이미지를 cv.Mat 타입으로 저장한다. HTML의 canvas 요소를 cv.Mat로 받을 수 있고 역도 성립한다. ImageData 인터페이스는 canvas 요소 영역의 기본 픽셀 데이터를 표현, 설정할 수 있다. 1. 이미지 데이터 객체를 캔버스로 부터 생성하기 html 요소가 canvas가 아닌 경우 file이 업로드 되었을 때 img의 src를 file의 src로 넣어준다. e.target.files = FileList {0: File, length: 1} File: {name: 'dog.jpg', l..

addEventListener()는 documnet 요소에 event를 부여할 때 사용. addEventListener(event, 실행할 함수) 로 정의한다. 총 3가지의 방법으로 정의할 수 있다. button.addEventListener('이벤트', 함수명) button.addEventListener('이벤트', 익명함수정의); button.addEventListener('이벤트', ()=>{}); 대부분 화살표 함수를 사용하여 정의한다. var button = document.getElementById('btn'); function clickButton() { alert("버튼을 클릭하였습니다."); } // case 1 button.addEventListener('click', clickButt..

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 을 참고하였다. Hello OpenCV.js OpenCV.js is loading... imageSrc canvasOutput openCV Template Matching 사용자의 입력 이미지에서 머신러닝 없이 원하는 부분의 객체가 어디에 위치하는지 알아보다 ope..

웹 페이지가 로딩되었을 때 로딩된 이벤트에 맞춰 원하는 함수, 코드를 호출할 수 있도록 한다. 대표적으로 window.onload 콜백함수가 있다. window.onload window.onload = function() { alert("윈도우 창이 켜졌을 때 바로 실행됨"); } 실행화면 한번에 실행될 load 메서드가 1개보다 많을 시 마지막 onload 메서드만 실행된다. window.onload = function() { alert("윈도우 창이 켜졌을 때 바로 실행됨"); } window.onload = function() { alert("한번에 실행 될 onload 메소드가 1개보다 많을 시 제일 마지막만 실행."); } 실행화면 태그에서 onload 실행화면 특정객체에서 onload 0 실행..

prototype 프로퍼티 모든 함수는 객체로서 prototype 프로퍼티를 가지고 있다. prototype 프로퍼티는 함수가 생성될 때 만들어지며 constructor 프로퍼티 하나만 있는 객체를 가리킨다. constructor 프로퍼티는 prototype 프로퍼티를 참조하며 서로 참조하는 관계를 가진다. 함수의 다양한 형태 자바스크립트에서 함수 표현식에서 함수이름은 필수 사항이 아니다. 함수이름을 붙이지 않은 것을 익명함수라고 하고 대표적으로 콜백함수가 있다. 콜백함수 콜백 함수란 코드를 통해 명시적으로 호출되는 함수가 아닌 어떤 이벤트나 특정 시점에 도달했을때 시스템에서 호출되는 함수를 말한다. 이벤트 발생 -> 이벤트 핸들러가 함수 호출 -> 콜백함수 (개발자가 등록) window.onload 이..

JavaScript - 1 자바스크립트는 하나의 숫자형 Number 타입만 존재하고 double과 같이 64비트 실수로 저장한다. var num = 5 / 2; console.log(num); // 2.5 console.log(Math.floor(num)); // 2 console.log(Math.ceil(num)); // 3 in 키워드를 사용하였을 경우 property의 키 값에 해당된다 배열의 경우 인덱스, 프로퍼티의 경우 key 값 var str = "my test"; for (str_temp of str) { console.log(str_temp); } // m y t e s t 출력 for (str_temp in str) { console.log(str_temp); 객체 객체 생성 두가지 방법..

숫자 맞히기 게임 참고 사이트 Number guessing game We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low. Enter a guess: 데이터를 저장할 변수를 추가한다. 변수는 let 키워드를 통해 생성할 수 있다. 상수는 const 키워드를 통해 생성할 수 있다. let randomNumber = Math.floor(Math.random() * 100) + 1; const guesses = document.querySelector('.guesses'); const lastRe..