JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 밝기조절, 색상 변경, 미러링, 회전, 확대/축소, 블러효과

이전 글: JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 파일 불러오기 (tistory.com)

 

JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 파일 불러오기

 

0. 틀 준비하기

우선 입력된 이미지(inImage)와 영상처리를 거친 이미지(outImage)를 분리해 줄 필요가 있으므로, out에 대한 변수와 함수도 전부 지정해 준다.

out 변수 추가

outCanvas 추가

outCanvas도 초기준비시켜줌

 

캔버스가 준비된 모습

그리고 다양한 효과를 적용시킬 수 있는 select탭을 만들어주고, 실행될 수 있도록 selectAlgorithm 함수도 만들어준다.

그리고 outImage도 displayImage 되어야 하므로 기존 함수에 추가해 준다.

효과를 적용할 때마다 매번 outImage 메모리를 확보해야 하는데, 이를 편하게 함수로 만들어두자.

 

효과는 대부분 이전 글(밑 링크)과 로직이 같아 설명을 생략하였습니다.

Alpha버전 참고하기: https://hanav.tistory.com/130

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

 

1. 원본 이미지 그대로 보기

inImage와 outImage가 같은 경우이다.

            function equalImage() {
                out(inH, inW);

                for(var i=0; i<outH; i++) {
                    for (var k=0; k<outW; k++) {
                        outImage[i][k] = inImage[i][k];
                    }
                }
                displayImage();
            }

 

2. 밝기 조절하기

밝기는 값을 입력받아 (prompt사용하기) 그만큼 더해준다.

          function brightness() {
                out(inH, inW);

                for(var i=0; i<outH; i++)
                    outImage[i] = new Array(outW);
                var value = parseInt(prompt("값을 입력하세요", "50"));
                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        if (inImage[i][k] + value < 0 )
                            outImage[i][k] = 0;
                        else if (inImage[i][k] + value > 255 )
                            outImage[i][k] = 255;
                        else 
                            outImage[i][k] = inImage[i][k]+value;
                    }
                }
                displayImage();
            }

 

3. 고대비

           function blackWhite() {
                out(inH, inW);

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {

                            if (inImage[i][k] > (0 + 255)/2) {
                                outImage[i][k] =  255;
                            } else {
                                outImage[i][k] = 0;
                            }
                        }
                    }
                
                displayImage();
            }

 

4. 색상 반전

           function reverseImage() {
                out(inH, inW);

                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        outImage[i][k] = 255 - inImage[i][k];
                    }
                }
                displayImage();
            }

 

5. 좌우/상하반전

         function rightToLeft() {
                out(inH, inW);

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                        outImage[i][k] = inImage[i][outW - k -1];
                        }
                    }
                
                displayImage();
            }



            function upToDown() {
                out(inH, inW);

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                        outImage[i][k] = inImage[outH - i - 1][k];
                        }
                    }
                
                displayImage();
            }

 

6. 90도/180도/270도 회전

            function rotation_90() {
                out(inH, inW);

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                        outImage[i][k] = inImage[inH-1-k][i];
                        }
                    }
                
                displayImage();
            }


            function rotation_180() {
                out(inH, inW);

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                        outImage[i][k] = inImage[inH-1-i][inW - 1 - k];
                        }
                    }
                
                displayImage();
            }



            function rotation_270() {
                out(inH, inW);

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                        outImage[i][k] = inImage[k][inW-1-i];
                        }
                    }
                
                displayImage();
            }

 

 

7. 이미지 축소하기

         function reduceImage() {
                    out(parseInt(inH/2), parseInt(inW/2));


                    for (i=0; i<outH; i++) {
                        for (k=0; k<outW; k++) {
                            outImage[i][k] = (inImage[i*2+1][k*2+1] +inImage[i*2+1][k*2]+inImage[i*2][k*2+1]+inImage[i*2][k*2])/4;
                        }
                    }
                    
                displayImage();
            }

 

8. 이미지 확대하기

사실 저번에 한 알고리즘대로 하는 건 최근접 이웃 보간법(그냥 *4 하는 거)이랑 다를 게 없어서 화질개선을 위해 좀 더 생각중이다.

            function expandImage() {

                out(inH*2, inW*2);


                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                                outImage[i][k] = inImage[parseInt(i/2)][parseInt(k/2)];
                    }
                }

                    }
                }

                displayImage();

            }

 

9. 블러효과(추가)

계속 평균을 내다보니 주변 값들을 더해서 나누면 명도가 비슷해지니 블러 효과를 낼 수 있을 것 같다는 생각이 문득 들었다. 
처음에는 주변 3x3 배열의 평균값으로 했는데, 효과가 생각보다 작아서 5x5배열로 바꿨다.

            function BlurImage() {

                out(inH, inW);

                for (i=2; i<outH-2; i++) {
                    for (k=1; k<outW-2; k++) {
                        outImage[i][k] = (inImage[i-2][k-2] + inImage[i-2][k-1] + inImage[i-2][k] + inImage[i-2][k+1] + inImage[i-2][k+2] + 
                                        inImage[i-1][k-2] + inImage[i-1][k-1] + inImage[i-1][k] + inImage[i-1][k+1] + inImage[i-1][k+2] + 
                                        inImage[i][k-2] + inImage[i][k-1] + inImage[i][k] + inImage[i][k+1] + inImage[i][k+2] + 
                                        inImage[i+1][k-2] + inImage[i+1][k-1] + inImage[i+1][k] + inImage[i+1][k+1] + inImage[i+1][k+2] + 
                                        inImage[i+2][k-2] + inImage[i+2][k-1] + inImage[i+2][k] + inImage[i+2][k+1] + inImage[i+2][k+2])/25;
                    }
                }
                
                displayImage();

            }