JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 히스토그램 처리, 곱하기, 카툰효과

1. 히스토그램 처리를 사용한 고대비 처리

기존 고대비 효과는 0과 255의 평균인 127.5 값을 기준으로 그보다 크면 255, 작으면 0으로 처리하였다.
하지만 만약 사진이 이미 밝은 편이어서 모두 128 이상이라면? 아니면 모두 127 이하라면?
원본 이미지에는 분명 명도 차이가 있지만, 이 효과를 적용하면 전부 같은 흰색이나 검은색으로 나타날 것이다. 아래 사진도 배경과 털이 모두 255로 처리되어서 배경과 차이가 없어졌다.

이를 해결하기 위해 단순히 127.5를 기준으로 잡지 않고, 전체 픽셀들의 분포를 기준으로 잡도록 할 수 있다. 이를 히스토그램 처리라고 한다.
다음은 전체 픽셀의 평균과 중간값을 기준으로 한 영상처리이다.

            function blackWhite2() {
                out(inH, inW);
                var avgValue, sum =0 ;
                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        sum += inImage[i][k];
                avgValue = sum / (inH*inW);

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

평균은 sum에 전체 픽셀 값의 합을 담은 뒤 평균을 구했고,

			function blackWhite3() {
                out(inH, inW);
                var centerValue = 0;
                var oneAry = new Array(inH*inW);
                var index=0;
                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        oneAry[index++] = inImage[i][k];
                oneAry.sort();
                centerValue = oneAry[parseInt((inH*inW)/2)];

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

중간값은 전체 픽셀을 새로운 배열에 담은 뒤 sort()함수로 정렬하여 중간값을 찾아내었다.

평균값

중간값

확실히 127.5를 기준으로 하던 영상처리보다 사진의 명도 구분이 사진에 맞게 명확하게 되었다.

 

2. 히스토그램 명암대비 스트레칭

이미지 내에서 명암 차이가 별로 없으면 경계가 명확하지 않고 그림이 흐리게 표현된다. 이를 개선하기 위해 전체 명암 분포를 고려해서 스트레칭시킬 수 있다.

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

                //공식: out = (in - low)/(high - low)*255.0
                var low = inImage[0][0], high = inImage[0][0]; 
                    //high low를 구할 때 초기값을 내부에 있는 값으로 해주는 게 안전하다

                for(var i=0; i<outH; i++) {
                    for (var k=0; k<outW; k++) {
                        if (inImage[i][k] < low)
                            low = inImage[i][k];
                        if (inImage[i][k] > high)
                            high = inImage[i][k];
                    }
                }

                for(var i=0; i<outH; i++) {
                    for (var k=0; k<outW; k++) {
                        outImage[i][k] = parseInt((inImage[i][k]-low)/(high-low)*255.0);
                    }
                }
                displayImage();
            }

 

3. 엔드- 인 탐색

high값이 이미 255이거나 255에 가깝고, low값이 이미 0이거나 0에 가까운 경우, 스트레칭을 할 수가 없다. 공간은 0~255까지 제한되어 있으니 스트레칭을 할 공간이 없는 것이다.
그럼에도 좀 더 선명한 명도대비를 원한다면, high값을 강제로 낮추고 low 값을 강제로 높혀서 공간을 만들고 스트레칭을 하면 더욱 선명한 명도 대비를 보이게 할 수 있다.

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

                 //공식: out = (in - low)/(high - low)*255.0
                 var low = inImage[0][0], high = inImage[0][0]; 
                    //high low를 구할 때 초기값을 내부에 있는 값으로 해주는 게 안전하다

                for(var i=0; i<outH; i++) {
                    for (var k=0; k<outW; k++) {
                        if (inImage[i][k] < low)
                            low = inImage[i][k];
                        if (inImage[i][k] > high)
                            high = inImage[i][k];
                    }
                }
                high -=50;
                low += 50;

                for(var i=0; i<outH; i++) {
                    for (var k=0; k<outW; k++) {
                        outImage[i][k] = parseInt((inImage[i][k]-low)/(high-low)*255.0);
                    }
                }
                displayImage();
            }

이미 high low가 각각 255, 0에 가까워서 히스토그램 처리를 해도 잘 적용이 되지 않는 모습이다.

엔드-인 탐색으로 명도 대비를 확실하게 한 모습

다만, 엔드인은 명도가 한 쪽으로 치우쳐진 (너무 어둡거나 너무 밝은) 이미지는 적용하기 위험하다. 맨 끝 50씩을 잘라버리기 때문에 적합하지 않다.

 

4. 히스토그램 평활화

어둡게 촬영된 사진에 제일 적합한 영상처리로, 어둡게 촬영된 영상의 밝기 분포를 재분배해서 명암 대비를 최대로 끌어올리는 기법이다.

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

                //1단계: 히스토그램 생성
                var histo = new Array(256);
                for (var i=0; i<256; i++) // 초기화
                    histo[i] = 0;

                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        histo[inImage[i][k]]++;
                //2단계: 누적 히스토그램
                var sumHisto = new Array(256);
                for (var i=0; i<256; i++) // 초기화
                    sumHisto[i] = 0;
                var sumValue = 0;
                for (var i=0; i<256; i++) {
                    sumValue += histo[i];
                    sumHisto[i] = sumValue;
                }
                
                //3단계: 정규화된 누적 합계
                var n = new Array(256);
                for (var i=0; i<256; i++) // 초기화
                    n[i] = 0.0;
                for (var i=0; i<256; i++)
                    n[i] = sumHisto[i] * (1.0/(inH*inW) * 255.0);
                

                //최종
                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        outImage[i][k] =  parseInt(n[inImage[i][k]]);
                    }
                }
                displayImage();
            }

 

5. 곱하기

픽셀값을 더하고 빼서 밝기를 조절했다면, 곱할 수도 있다.
다만 곱하게 되면 밝은 값은 더 밝아지고 어두운 값은 덜 밝아진다는 것이다.
프로크리에이트에서 항상 자주 쓰던 곱하기 레이어가 이런 원리였음을 알게 되었다.

            function multipyImage() {
                out(inH, inW);
                var value = prompt("값을 입력하세요(양수)", "2");

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

1.5를 곱했을 때

 

6. 카툰 효과

명도가 변할 때 자연스럽게 이어지지 않고 경계가 지면서 미국 카툰 느낌이 나도록 보정할 수도 있다. 
0~255까지 범위를 정해 일정 범위는 같은 픽셀값으로 설정해주면 된다.

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

                for (i=0; i<outH; i++) {
                    for (k=0; k<outW; k++) {
                        if (inImage[i][k]>200)
                            outImage[i][k] = 225;
                        else if (inImage[i][k]>175)
                            outImage[i][k] = 200;
                        else if (inImage[i][k]>150)
                            outImage[i][k] = 175;
                        else if (inImage[i][k]>125)
                            outImage[i][k] = 150;
                        else if (inImage[i][k]>100)
                            outImage[i][k] = 125;
                        else if (inImage[i][k]>75)
                            outImage[i][k] = 100;
                        else if (inImage[i][k]>50)
                            outImage[i][k] = 75;
                        else if (inImage[i][k]>25)
                            outImage[i][k] = 50;
                        else if (inImage[i][k] = 0)
                            outImage[i][k] = 0
                        else outImage[i][k] = 25;
                        }
                    }
                
                displayImage();
            }

기여웡