자바스크립트를 이용한 개인 프로젝트 - 13(마우스 클릭 이벤트)

2021/04/01(목)

 

 

 

 

컬러 흑백처리/부분흑백처리/색반전 알고리즘 참고

https://cordingdoah.tistory.com/95

자바스크립트를 이용한 개인 프로젝트 - 12(영상 처리 알고리즘)

 

 

 

 

 

이번에는 영상처리를한 사진을 클릭하면 원본사진으로 보여주고 마우스를 떼면 다시 돌아오는 이벤트를 생성에 대해서 말해보겠다

마치 기존에 어플에서 얼굴 보정을 하고 원본과 잠시 비교하는 버튼을 눌러 확인할 수 있는 기능을 만들어보자는 것!

 

 

 

 

만드는 것은 간단하다

클릭했을 때 원본이미지를 보여주는 mousedown과 클릭을 떼면 기존 처리된 이미지를 보여주는 mouseup

클릭이벤트 생성 메소드와 클릭이벤트를 제거해주는 메소드 2개를 만들어준다

  	//사진 클릭시 원본 사진 출력
        function clickEvent() {

            inCanvas.addEventListener("mousedown", inImagePrint, false);
            inCanvas.addEventListener("mouseup", displayImage, false);
        }

        //마우스를 떼면 원래 사진으로 출력
        function clickEventDown() {
            inCanvas.removeEventListener("mousedown", inImagePrint, false);
            inCanvas.removeEventListener("mouseup", displayImage, false);
        }

 

 

 

 

<inImagePrint>

        function inImagePrint() {

            var R, G, B;
            inPaper = inCtx.createImageData(inWidth, inHeight);
            for (var i = 0; i < inHeight; i++) {
                for (var k = 0; k < inWidth; k++) {
                    R = inImageArray[0][i][k].charCodeAt(0); // Byte 문자를 숫자로.
                    G = inImageArray[1][i][k].charCodeAt(0); // Byte 문자를 숫자로.
                    B = inImageArray[2][i][k].charCodeAt(0); // Byte 문자를 숫자로.
                    inPaper.data[(i * inWidth + k) * 4 + 0] = R;
                    inPaper.data[(i * inWidth + k) * 4 + 1] = G;
                    inPaper.data[(i * inWidth + k) * 4 + 2] = B;
                    inPaper.data[(i * inWidth + k) * 4 + 3] = 255;
                }
            }
            inCtx.putImageData(inPaper, 0, 0);

        }

원본 이미지가 담겨있는 inImageArray 배열을 출력하는 메소드

 

 

 

 

<displayImage>

        function displayImage() {
            // 캔버스 크기를 결정
            inCanvas.height = outHeight;
            inCanvas.width = outWidth;

            var R, G, B;
            inPaper = inCtx.createImageData(outWidth, outHeight);
            for (var i = 0; i < outHeight; i++) {
                for (var k = 0; k < outWidth; k++) {
                    R = outImageArray[0][i][k].charCodeAt(0); // Byte 문자를 숫자로.
                    G = outImageArray[1][i][k].charCodeAt(0); // Byte 문자를 숫자로.
                    B = outImageArray[2][i][k].charCodeAt(0); // Byte 문자를 숫자로.
                    inPaper.data[(i * outWidth + k) * 4 + 0] = R;
                    inPaper.data[(i * outWidth + k) * 4 + 1] = G;
                    inPaper.data[(i * outWidth + k) * 4 + 2] = B;
                    inPaper.data[(i * outWidth + k) * 4 + 3] = 255;
                   
                }
            }
            inCtx.putImageData(inPaper, 0, 0);
        }

기존에 영상처리된 이미지를 출력해주는 메소드

 

 

 

이렇게 하면 완성 이제 적용하고 싶은 영상처리에 메소드만 넣어주면됌

예를들어 흑백처리에 위와같은 효과를 주고싶다면

        //그레이 스케일
        function grayScale() {

            // ***** 진짜 영상처리 알고리즘 *****
            var R, G, B;
            for (var i = 0; i < outHeight; i++) {
                for (var k = 0; k < outWidth; k++) {
                    R = outImageArray[0][i][k].charCodeAt(0);
                    G = outImageArray[1][i][k].charCodeAt(0);
                    B = outImageArray[2][i][k].charCodeAt(0);

                    var RGB = parseInt((R + G + B) / 3);

                    outImageArray[0][i][k] = String.fromCharCode(RGB);
                    outImageArray[1][i][k] = String.fromCharCode(RGB);
                    outImageArray[2][i][k] = String.fromCharCode(RGB);

                }
            }
            displayImage();
            clickEvent(); //이부분
        }

밑에 clickEvent()메소드만 호출해주면 됌

 

 

 

 

 

--> 마우스 클릭이벤트 결과 화면