JavaScript로 영상처리 소프트웨어 만들기 (Alpha ver.) : 이미지 밝기조절, 색상 변경, 미러링, 회전, 확대/축소, 다이아몬드로 만들기

*알고리즘 연습용으로 rgb를 임의의 숫자(math.random()*256)로 대체함.
*정사각형인 GrayScale이미지라 가정함.

 

1. 이미지 원본 그대로

//함수 선언부
        function display(image, height, width) {
            
                for(var i=0; i<height; i++) {
                    for (var k=0; k<width; k++) {

                        var space = "";
                        if (image[i][k] < 10)
                            space = "00";
                        else if (image[i][k] <100)
                            space = "0";

                        document.write(space + image[i][k] + " ");
                    }
                    document.write("<br>");
                }
                document.write("<br><br>");
        }

이미지 파일의 크기는 5~10 중에서 랜덤하게 정하게 하였다.

//이미지파일 선택하면 크기가 다 다르기 때문에 랜덤하게 하자
        inHeight = inWidth = Math.floor(Math.random() * 6 + 5); //5~10크기 영상
        //메모리 확보
        inImage = new Array(inHeight);
            for (i=0; i<inHeight; i++) {
                inImage[i] = new Array(inWidth);
            }
        
        //파일에서 이미지 로딩
        for (i=0; i<inHeight; i++) {
            for (k=0; k<inWidth; k++) {
                //여기서 [i][k] 값을 읽기
                inImage[i][k] = Math.floor(Math.random() * 256);
            }
        }

        display(inImage, inHeight, inWidth);

//메인 코드부
display(inImage, inHeight, inWidth);

 

2. 이미지 밝기 조절

원본 이미지를 보존하기 위해 inImage와 outImage를 분리하였고, 각각의 메모리를 확보해 주었다.
outImage는 반복되어 사용할 것이므로 따로 함수를 만들어줬다.

   function out(height, width) {
            outHeight = height;
            outWidth = width;
            outImage = new Array(height);
            for(i=0; i<height; i++) {
                outImage[i] = new Array(width);
            }
        }

항상 0과 255 사이여야 하므로 조건을 적용시켜 준다.

      function brightness(image, height, width, number) {
            document.write("==image brightness " + number + "==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    
                    if (number>0) {
                        if (image[i][k] + number > 255) {
                            outImage[i][k] =  255;
                        } else {
                            outImage[i][k] = image[i][k] + number;
                        }
                    } else {
                        if (image[i][k] + number < 0) {
                            outImage[i][k] = 0;
                        } else {
                            outImage[i][k] = image[i][k] + number;
                        }
                    }
                }
            }
            display(outImage, outHeight, outWidth);
        }

//메인 코드부
     brightness(inImage, inHeight, inWidth, 100);
     brightness(inImage, inHeight, inWidth, -100);

 

3. 이미지 흑백처리

원래 rgb 세 값이 있으면 r=g=b인 상태가 흑백(채도가 0) 처리되는데, 값이 하나이므로 127.5보다 크면 255, 127.5보다 작으면 0으로 나타내기로 한다.

function blackWhite(image, height, width) {
            document.write("==image only with black and white==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {

                        if (image[i][k] > (0 + 255)/2) {
                            outImage[i][k] =  255;
                        } else {
                            outImage[i][k] = 0;
                        }
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }

//메인 코드부
blackWhite(inImage, inHeight, inWidth);

 

4. 이미지 색상 반전시키기

간단하게 255에서 이전 값을 빼주면 된다.

     function colorInversion(image, height, width) {
            document.write("==image color inversion==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    outImage[i][k] = 255 - image[i][k];
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }

//메인 코드부
colorInversion(inImage, inHeight, inWidth);

 

5. 이미지 미러링시키기 (좌우반전과 상하반전)

       function rightToLeft(image, height, width) {
            document.write("==image right to left mirroring==<br>");

            out(height, width);

            outImage.fil

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    outImage[i][k] = image[i][width - k -1];
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }



        function upToDown(image, height, width) {
            document.write("==image up to down mirroring==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    outImage[i][k] = image[height - i - 1][k];
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }

//메인 코드부      
      rightToLeft(inImage, inHeight, inWidth);
      upToDown(inImage, inHeight, inWidth);

 

6. 이미지 회전 (90도, 180도, 270도)

       function rotation_90(image, height, width) {
            document.write("==image 90 degree clockwise==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    outImage[i][k] = image[height-1-k][i];
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }



        function rotation_180(image, height, width) {
            document.write("==image 180 degree clockwise==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    outImage[i][k] = image[height - 1 - i][width - 1 -k];
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }




        function rotation_270(image, height, width) {
            document.write("==image 270 degree clockwise==<br>");

            out(height, width);

            for (i=0; i<height; i++) {
                for (k=0; k<width; k++) {
                    outImage[i][k] = image[k][width - 1 - i];
                    }
                }
            
            display(outImage, outHeight, outWidth);
        }

//메인 코드부
		rotation_90(inImage, inHeight, inWidth);
        rotation_180(inImage, inHeight, inWidth);
        rotation_270(inImage, inHeight, inWidth);

 

7. 이미지 2배 축소하기

이미지 축소는 일단 배열의 행렬 크기를 1/2배로 줄여야 하므로, outImage 배열도 1/2배인 크기로 만들어준다. (홀수라면 그냥 제일 끝의 행렬을 제거하였다.)
또한, 축소될 때 2x2 크기의 배열이 1x1크기로 되기 때문에 네 개의 value값의 평균을 내어 새로운 하나의 value를 지정하였다.

홀수 짝수 나누는 부분은 몫을 구하는 함수인 parseInt()로 대체하면 더 간단하게 줄일 수 있다.

      function reduceImage(image, height, width) {
            document.write("==image x2 reduction==<br>");
            var h, w = 0;
            if (height % 2 == 0) {
                h = height/2;
                w = width/2;
            } else {
                h = (height-1)/2;
                w = (width-1)/2;
            }
                out( h, w);

                for (i=0; i<h; i++) {
                    for (k=0; k<w; k++) {
                        outImage[i][k] = Math.round((image[i*2+1][k*2+1] +image[i*2+1][k*2]+image[i*2][k*2+1]+image[i*2][k*2])/4);
                    }
                }
                  
            display(outImage, outHeight, outWidth);
        }

//메인 코드부
reduceImage(inImage, inHeight, inWidth);

 

8. 이미지 2배 확대하기

사실 처음에 들었던 생각은 주변 배열의 평균을 하나하나 구해서 배열의 사이즈가 하나씩 줄고, while문을 탈출할 때까지 배열의 크기를 원할 때까지 줄이는 것으로 하고 싶었는데, 값이 많지 않다 보니 이 예제에서는 불가능하다고 판단하였다.
그래서 그냥 하나의 value를 2x2 총 4개의 value로 늘리는 식으로 확대를 할까 했다가 주변 4개의 평균으로 해보고 싶어서 해보았다. 근데 하고 보니 딱히 의미가 있었는지는 모르겠다.. 값이 간단할 때 이것저것 해보는 거에 의미를 두기로 했다 ㅜㅜ

       function expandImage(image, height, width) {
            document.write("==image x2 expansion==<br>");
            var h = height * 2;
            var w = width * 2;
                out( h, w);

                for (i=0; i<h; i++) {
                    for (k=0; k<w; k++) {

                        if ((i <= 0) || (i >= h-1)){
                            if ((k <= 0) || (k >= w-1)) {
                                outImage[i][k] = Math.round((image[parseInt(i/2)][parseInt(k/2)] +0+0+0)/4);
                            } else {
                                outImage[i][k] = Math.round((image[parseInt(i/2)][parseInt((k+1)/2)] +image[parseInt(i/2)][parseInt((k+1)/2)]+0+0)/4);
                            }
                        }
                        else if ((k <= 0) || (k >= w-1)) {
                            outImage[i][k] = Math.round((image[parseInt((i+1)/2)][parseInt(k/2)] +image[parseInt((i+1)/2)-1][parseInt(k/2)]+0+0)/4);
                        } else {
                            outImage[i][k] = Math.round((image[parseInt((i+1)/2)][parseInt((k+1)/2)] +image[parseInt((i+1)/2)-1][parseInt((k+1)/2)]+image[parseInt((i+1)/2)][parseInt((k+1)/2)-1]+image[parseInt((i+1)/2)-1][parseInt((k+1)/2)-1])/4);
                        }
                    }
                }
                  
            display(outImage, h, w);
        }

 //메인 코드부
 expandImage(inImage, inHeight, inWidth);

 

9. 이미지 45도 회전하기 

이런 식으로 배열을 다이아몬드처럼 돌리고, 나머지에는 0 값을 넣는 배열을 만들어보려고 규칙을 찾았다. (이건 규칙을 찾는 게 더 오래 걸렸다)
이번엔 빈자리가 많기 때문에 outImage 배열을 먼저 0으로 초기화를 시켰다. 그 후에 찾은 규칙을 적용시켰다.

       function diamond(image, height, width) {
            document.write("==make it diamond==<br>");
            
            var h = height * 2 -1;
            var w = width * 2 -1;

            outHeight = h;
            outWidth = w;
            outImage = new Array(h);
            for(i=0; i<h; i++) {
                outImage[i] = new Array(w).fill(0);
            }

            for (i=0; i<height; i++) {
                    for (k=0; k<width; k++) {
                        outImage[i + k][k + width -1 - i] = image[i][k];
                    }
            }


            display(outImage, outHeight, outWidth);
        }