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

2021/04/01(목)

 

 

 

 

엠보싱/블러링 알고리즘 참고

https://cordingdoah.tistory.com/91

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

 

 

 

 

영상처리 알고리즘 : 샤프닝, 가우시안, 고주파샤프닝 구현하기

바로 고!!

마스크의 원리는 위에 링크를 참조~

 

 

 

 

<샤프닝>

        //샤프닝
        function sharpeImage() {

            clickEventDown();
            // 샤프닝 화소 영역 처리
            var mask = [[0., -1., 0.],
            [-1., 5., -1.],
            [0., -1., 0.]];

            //입시 입력 배열
            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. 출력 메소드 호출

 

 

 

 

--> 샤프닝 결과화면

 

 

 

 

<가우시안>

        //가우시안
        function gaussianImage() {

            clickEventDown();
            //가우시안 화소 영역 처리
            var mask = [[1 / 16., 1 / 8., 1 / 16.],
            [1 / 8., 1 / 4., 1 / 8.],
            [1 / 16., 1 / 8., 1 / 16.]];

            //입시 입력 배열
            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. 출력 메소드 호출

 

 

 

 

--> 가우시안 결과화면

 

 

 

 

 

<고주파 샤프닝>

        //고주파 샤프닝
        function hpfSharpeImage() {

            clickEventDown();
            //고주파 화소 영역 처리
            var mask = [[-1 / 9., -1 / 9., -1 / 9.],
            [-1 / 9., 8 / 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 += 100 * 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. 출력 메소드 호출

 

 

 

 

--> 고주파 샤프닝 결과화면