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

2021/04/01(목)

 

 

 

 

좌우반전/상하반전/90도회전 알고리즘 참고

https://cordingdoah.tistory.com/90

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

 

 

 

 

영상처리 알고리즘 : 엠보싱, 블러링 구현해보기

바로 고!!

 

 

 

엠보싱, 블러링 원리

mask를 각 요소에 가운데 오도록 대입 해서 주변값을 곱하고 모두 더해서 가운데에 값을 넣어줌

mask값은 각 블러링이나 엠보싱같은 처리에 따라 값이 다르고 정해져 있음

가운데 있는 값은 마스크를 씌울 수 있지만 끝에 있는 값은 주변 값이 부족해 표현 할 수 없기 때문에 

큰 배열을 선언하여 표현해줌 

 

 

 

<엠보싱>

        //엠보싱
        function embossImage() {

            clickEventDown();
            //엠보싱 화소 영역 처리
            var mask = [[-1., 0., 0.],
            [0., 0., 0.],
            [0., 0., 1.]];


            //입시 입력 배열
            tmpInputArray = new Array(outHeight + 2); // 2칸 큰 배열
            for (var i = 0; i < outHeight + 2; i++)
                tmpInputArray[i] = new Array(outWidth + 2);

            //임시 배열 초기화
            for (var i = 0; i < outHeight + 2; i++)
                for (var k = 0; k < outWidth + 2; k++)
                    tmpInputArray[i][k] = String.fromCharCode(127);

            //임시배열 --> 입시 입력
            for (var i = 0; i < outHeight; i++)
                for (var k = 0; k < outWidth; k++)
                    tmpInputArray[i + 1][k + 1] = outImageArray[i][k];

            //임시 출력 배열
            tmpOutputArray = new Array(outHeight);
            for (var i = 0; i < outHeight; i++)
                tmpOutputArray[i] = new Array(outWidth);

            // ***** 진짜 영상처리 알고리즘 *****
            for (var i = 0; i < outHeight; i++) {
                for (var k = 0; k < outWidth; k++) {
                    var s = 0.0;
                    for (var m = 0; m < 3; m++)
                        for (var n = 0; n < 3; n++) {
                            s += mask[m][n] * tmpInputArray[i + m][k + n].charCodeAt(0);
                        }
                    tmpOutputArray[i][k] = s;
                }

            }
            //만약, 마스크의 합계가 0이면, 결과를 127 더하자.
            for (var i = 0; i < outHeight; i++)
                for (var k = 0; k < outWidth; k++) {
                    tmpOutputArray[i][k] += 127.0;
                }
            //임시출력 --> 진짜 출력 배열
            for (var i = 0; i < outHeight; i++)
                for (var k = 0; k < outWidth; k++) {
                    var v = tmpOutputArray[i][k];

                    if (v > 255.0) {
                        v = 255.0;
                    }
                    else if (v < 0.0) {
                        v = 0.0;
                    }
                    outImageArray[i][k] = String.fromCharCode(v);
                }

            displayImage();
            clickEvent();
        }

1. 엠보싱 처리하는 마스크 선언

2. 가로, 세로 2칸이 더 큰 임시 배열을 선언

3. 임시배열의 값을 모두 중간값인 127로 초기화

4. 임시배열 안에 원본 사진을 넣어줌

이렇게 큰 배열에 사진을 넣어준 것과 같음

5. 각 마스크의 요소와 임시배열의 값들을 곱하고 모두 더해 값을 표현

6. 엠보싱 마스크의 경우 값을 모두 더하면 0이 되기 때문에 색표현이 어둡게 나옴 그래서 처리해준 배열에 127을 더함

7. 마지막으로 배열 값이 색을 표현하는 0~255 사이의 값인지 확인 0보다 작으면 0으로 255보다 크면 255로 처리

8. 출력 메소드 호출

 

 

 

 

--> 엠보싱 결과화면

 

 

 

 

<블러링>

        //블러링
        function blurrImage() {

            clickEventDown();
            //블러링 영역 처리
            var mask = [[1 / 9., 1 / 9., 1 / 9.],
            [1 / 9., 1 / 9., 1 / 9.],
            [1 / 9., 1 / 9., 1 / 9.]];


            //입시 입력 배열
            tmpInputArray = new Array(outHeight + 2); // 2칸 큰 배열
            for (var i = 0; i < outHeight + 2; i++)
                tmpInputArray[i] = new Array(outWidth + 2);

            //임시 배열 초기화
            for (var i = 0; i < outHeight + 2; i++)
                for (var k = 0; k < outWidth + 2; k++)
                    tmpInputArray[i][k] = String.fromCharCode(127);

            //임시배열 --> 입시 입력
            for (var i = 0; i < outHeight; i++)
                for (var k = 0; k < outWidth; k++)
                    tmpInputArray[i + 1][k + 1] = outImageArray[i][k];

            //임시 출력 배열
            tmpOutputArray = new Array(outHeight); // 2칸 큰 배열
            for (var i = 0; i < outHeight; i++)
                tmpOutputArray[i] = new Array(outWidth);

            // ***** 진짜 영상처리 알고리즘 *****
            for (var i = 0; i < outHeight; i++) {
                for (var k = 0; k < outWidth; k++) {
                    var s = 0.0;
                    for (var m = 0; m < 3; m++)
                        for (var n = 0; n < 3; n++) {
                            s += mask[m][n] * tmpInputArray[i + m][k + n].charCodeAt(0);
                        }
                    tmpOutputArray[i][k] = s;
                }
            }


            //임시출력 --> 진짜 출력 배열
            for (var i = 0; i < outHeight; i++)
                for (var k = 0; k < outWidth; k++) {
                    var v = tmpOutputArray[i][k];

                    if (v > 255) {
                        v = 255.0;
                    }
                    else if (v < 0) {
                        v = 0.0;
                    }
                    outImageArray[i][k] = String.fromCharCode(v);
                }

            displayImage();
            clickEvent();
        }

블러링도 엠보싱과 마찬가지로 구현

1. 블러링 마스크 선언

2. 2칸 더 큰 임시배열 선언 후 127로 초기화

3. 임시배열에 사진 배열 넣어주기

4. 각 마스크와 임시배열의 요소 값들을 곱하고 모두 더해 배열에 저장

* 블러링 마스크는 모두 더해도 0이 아니기 때문에 127을 더해줄 필요가 없음

5. 배열 값이 0~255사이 값인지 확인하고 if문 처리

6. 출력 메소드 호출

 

 

 

 

--> 블러링 결과화면