본문 바로가기

OpenCV없는 컬러영상처리 및 마우스 이벤트

(8)
Visual Studio code에서 로컬웹서버로 홈페이지 열기 1. Visual Studio code에서 확장 마켓플레이스에서 live server를 검색하여 설치합니다. 2. live server의 설치가 끝나면 파일 탐색기에서 열고자하는 웹페이지 소스파일에서 오른쪽 마우스를 클릭한 후 Open with Live Server를 클릭합니다. 3. 웹페이지가 열리면 127.0.0.1이라는 로컬 서버로 웹페이지가 열리게 됩니다. -->웹페이지에서 컬러이미지 처리 가능해지죠~~~ 코드를 수정하고 웹페이지에 가서 새로고침하면 바로 반영되어 나타납니다.
RGB <-- > HSV 변환 함수 HSV 변환 함수> function rgb2hsv(r, g, b) {//RGB --> HSV변환함수 var max = Math.max(r, g, b), min = Math.min(r, g, b), d = max - min, h, s = (max === 0 ? 0 : d / max), v = max / 255; switch (max) { case min: h = 0; break; case r: h = (g - b) + d * (g < b ? 6: 0); h /= 6 * d; break; case g: h = (b - r) + d * 2; h /= 6 * d; break; case b: h = (r - g) + d * 4; h /= 6 * d; break; } return { h: h, s: s, v: v ..
마우스 이벤트를 통한 칼라영상처리 //////////////////////////////////////////////// //이벤트리스너 /////////////////////////////////////////////// let startX, startY, endX, endY; let pressYN = false; let imageData;//마우스 클릭 시점의 화면 ///////마우스 처리 공통함수 --> ////////////// function __downMouse(event){ startX = event.offsetX; startY = event.offsetY; pressYN=true; //현재 상태를 보관하기 imageData = inCtx.getImageData(0,0,inCanvas.width, inCanvas.height..
히스토그램 처리하기 시연 영상(유튜브): https://youtu.be/xiq0ObeDjeE -HSV로 원본이미지를 처리하여야 할 것 같은데 HSV중 어느 것을 당겨야 스트레칭이 되는 지 모르겠다 -진짜 아쉬운부분 function stretchImage(){ outH=inH; outW=inW; outImage = new Array(3); // 3면 for(var m=0; m
화소 영역 처리 시연 영상(유튜브): https://youtu.be/npL6e6XcHzE function embossImage(){ //엠보싱 알고리즘 outH = inH; outW = inW; // 배열 선언 outImage = new Array(3); // 3면 for(var m=0; m
기하학처리 시연 영상(유튜브): https://youtu.be/1Sxv_qu4CcU function udImage(){ // 상하 미러링 // (중요!) 출력 이미지의 크기가 결정 -> 알고리즘에 의존.. outH = inH; outW = inW; // 출력 영상의 3차원 메모리 할당 outImage = new Array(3); // 3면 for(let m = 0 ; m < 3 ; m++){ outImage[m] = new Array(outH); for(let n = 0 ; n < outH ; n++){ outImage[m][n] = new Array(outW); } } // ** 진짜 영상처리 알고리즘 ** let a = 0; for(let i = 0 ; i < inH ; i++){ for(let k = 0 ; ..
화소점처리 시연 영상(유튜브): https://youtu.be/MDl-Dp8Kacc function lightImage(){ outH = inH; outW = inW; //메모리 할당(3차원 배열) outImage = new Array(3);//3면 for(var m=0;m
컬러 영상처리 전처리부 컬러이미지는 웹서버를 거쳐야 화면에 출력될수 있다. 칼라 영상 처리 (Beta 7) 사각형 선택 *화소점 처리* 동일 영상 영상 반전 영상 더하기 영상 빼기 영상 곱하기 영상 나누기 흑백127기준 흑백평균기준 흑백중앙값기준 파라볼라 캡 파라볼라 컵 감마 그레이스케일 채도 변환 명도 변환 오렌지 추출(컴퓨터 비전) *기하학 처리* 상하 미러링 좌우 미러링 영상 이동 영상 회전 영상 회전 90도 영상 축소 영상 확대 영상 확대(백워딩) 반시계 회전 *화소영역 처리* 엠보싱 블러링 샤프닝 가우시안 고주파 샤프닝 저주파통과 고주파 이동과 차분 유사연산자 로버츠마스크 수평/수직 소벨마스크 수평/수직 프리윗마스크 수평/수직 라플라시안 로그 도그 모자이크 *히스토그램 처리* 스트레칭 엔드-인 평활화