마우스 이벤트를 통한 칼라영상처리

 

 

<마우스 이벤트 함수>

////////////////////////////////////////////////
        //이벤트리스너
        ///////////////////////////////////////////////
        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);

                //alert(startX+","+startY);
            }
            function __upMouse(event){  
                inCtx.putImageData(imageData,0,0);
                endX = event.offsetX;
                endY = event.offsetY;

                //선택한 네모박스 안쪽만 영상처리 되기
                //시작과 끝을 재배치
                if(startX > endX){
                    let tmp = startX;
                    startX = endX;
                    endX = tmp;
                }
                if(startY > endY){
                    let tmp = startY;
                    startY = endY;
                    endY = tmp;
                }
                
                    //마우스 이벤트 리스너 끄기
                    inCanvas.removeEventListener("mousedown",__downMouse,false);
                    inCanvas.removeEventListener("mouseup",__upMouse,false);
                    inCanvas.removeEventListener("mousemove",__moveMouse,false);
                    pressYN= false;
                
                switch (algoNum) {
                    case 101://동일영상
                        equalImage();break;
                    case 102://반전영상
                        reverseImage();break;
                    case 103://영상더하기
                        lightImage();break;
                    case 104://영상빼기
                        darkImage();break;
                    case 105://영상곱하기
                        gopImage();break;
                    case 106://영상나누기
                        divImage();break;
                    case 107://흑백127기준
                        bwImage();break;
                    case 108://흑백평균기준
                        avgImage();break;
                    case 110://파라볼라 캡
                        paraCapImage();break;
                    case 111://파라볼라 컵
                        paraCupImage();break;
                    case 112://감마
                        gammaImage();break;
                    case 113://그레이스케일
                        grayImage();break;
                    case 114://채도 변환
                        saturImage();break;
                    case 115://명도 변환
                        intensityImage();break;
                    case 116://오렌지추출(컴퓨터비전)
                        orangeImage();break;

                    case 201:// 상하미러링
                        udImage();break;
                    case 202:// 좌우미러링
                        lrImage();break;
                    case 203:// 영상이동
                        swapImage();break;
                    case 204:// 영상회전
                        rotateImage();break;
                    case 205:// 영상회전 90도
                        image90();break;
                    case 206:// 영상축소
                        zoomOutImage();break;
                    case 207:// 영상확대
                        zoomInImage();break;
                    case 208:// 영상확대(백워딩)
                        zoomInImage2();break;
                    case 209:// 반시계회전
                        spinImage();break;

                    case 301:// 엠보싱
                        embossImage();break;
                    case 302:// 블러링
                        blurrImage();break;
                    case 303:// 샤프닝
                        sharpenImage();break;
                    case 304:// 가우시안
                        gaussianImage();break;
                    case 305:// 고주파 샤프닝
                        hpfSharpImage();break;
                    case 306:// 저주파 통과 샤프닝
                        OnLpfImage();break;
                    case 307:// 에지 검출 이동과 차분
                        sadImage();break;
                    case 308:// 유사연산자
                        opImage();break;
                    case 309: //로버츠 알고리즘
                        robertsImage();break;
                    case 310: //소벨 알고리즘
                        sobelImage();break;
                    case 311: //프리윗 알고리즘
                        prewittImage();break;
                    case 312: //라플라시안 알고리즘
                        laplacianImage();break;
                    case 313: //로그 알고리즘
                        logImage();break;
                    case 314: //dog 알고리즘
                        dogImage();break;
                    case 315: //모자이크
                        mosaic();break;

                    case 401:// 스트레칭
                        stretchImage();break;
                    case 402:// 엔드-인
                        endInImage();break;
                    case 403:// 평활화
                        equalizeImage();break;
              
            }
                //alert(startX+","+startY);
                pressYN=false;
            }
            function __moveMouse(event){
                if(!pressYN)
                    return;
                
                inCtx.putImageData(imageData,0,0);

                endX = event.offsetX;
                endY = event.offsetY;

                inCtx.beginPath();//선그리기 시작
                inCtx.strokeStyle = 'blue';
                inCtx.lineWidth =1;

                inCtx.rect(startX, startY, (endX-startX),(endY-startY));
                
                inCtx.stroke();
                inCtx.closePath();
                
            }

        ////////<--마우스 처리 공통함수 //////////////////
        function onEventListener(){
            inCanvas.addEventListener("mousedown",__downMouse,false);
            inCanvas.addEventListener("mouseup",__upMouse,false);
            inCanvas.addEventListener("mousemove",__moveMouse,false);
        }