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

2021/04/01(목)

 

 

 

 

확대/축소 알고리즘 설명 참고

https://cordingdoah.tistory.com/89

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

 

 

 

 

영상처리 알고리즘 : 좌우반전, 상하반전, 90도 회전 구현해보기

바로 고!!

 

좌우반전 원리

가운데를 기준으로 좌우 교체

 

 

 

 

<좌우반전>

function leftRightImage() {

            clickEventDown();

            for (var i = 0; i < outWidth; i++) {
                for (var k = 0; k < outHeight / 2; k++) {             
                    pixel = outImageArray[i][k];
                    changeValue = outImageArray[i][outHeight - k - 1];
                    outImageArray[i][k] = changeValue;
                    outImageArray[i][outHeight - k - 1] = pixel;
                }
            }

            displayImage();
            clickEvent()
        }

 

 

코딩하며 많이 해봤던 값 바꾸기 코딩을 해주면 된다

height는 반만 돌리면 된다 

1. 현재 값을 pixel변수에 넣어준다 ex) 0,0

2. 임시변수에 바꿔줄 변수 넣어준다 ex) 0,4

 - outHeight값이 1부터 255라면 배열은 0부터 254니까 - 1을 해준다

3. 값을 서로 바꿔준다

4. 배열 출력메소드 호출

 

 

 

--> 좌우반전 결과 화면

 

 

 

 

상하반전 원리

 

 

<상하반전>

//상하 반전
        function upDownImage() {

            clickEventDown();
            for (var i = 0; i < outWidth / 2; i++) {
                for (var k = 0; k < outHeight; k++) {
                    pixel = outImageArray[i][k];

                    changeValue = outImageArray[outWidth - i - 1][k];
                    outImageArray[i][k] = changeValue;
                    outImageArray[outWidth - i - 1][k] = pixel;
                }
            }
            displayImage();
            clickEvent()
        }

좌우반전과 마찬가지로 값을 서로 바꿔주면됌

1. width값을 반만 돌려서 위아래를 교체 할 수 있도록 함

2. 현재값 저장 변수 pixel

3. 교체할 값 저장할 임시 변수 changeValue

4. i값을 마찬가지로 설정

5. 출력 메소드 호출

 

 

 

-->상하반전 결과화면

 

 

 

 

회전 원리

회전은 반이아니고 전체를 돌려야함

 

 

 

 

<회전하기>

 //회전
        function rotateImage() {

            clickEventDown();
            var tmpArray = outImageArray;

            //배열 초기화
            outImageArray = new Array(outHeight);
            for (var i = 0; i < outHeight; i++)
                outImageArray[i] = new Array(outWidth);

            //배열에 90도 회전 알고리즘
            for (var i = 0; i < outHeight; i++)
                for (var k = 0; k < outWidth; k++) {

                    outImageArray[i][k] = tmpArray[outHeight - k - 1][i];
                }

            //출력
            displayImage();
            clickEvent()
        }

1. 임시 배열에 원본 사진배열을 저장

2. 출력하는 배열을 초기화 시키고 

3. 초기화 시킨 배열에 원본 사진 배열의 끝값에서 k-1을 빼줌 (원리 참고)

4. 출력 메소드 호출

 

 

 

 

-->회전하기 결과화면