JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 마스크 사용해서 엠보싱, 블러, 가우시안 블러, 모션블러, 샤프닝, 엣지

화소 영역 처리란, 픽셀이 주변의 픽셀값에 영향을 받아 처리되는 것을 말한다.
이 처리를 하기 위해서는 주변 픽셀에 가중치를 곱하여 계산하는데, 이 떄 마스크를 사용한다.

마스크로 가중치를 곱하는 법

1. 먼저 마스크를 만들어줘야 한다. 가장 간단한 3by3 행렬로 만들었다. 아래는 엠보싱 마스크이다.

		var mask = [    [ -1.0 ,  0.0 ,  0.0 ], 
                                [  0.0 ,  0.0 ,  0.0 ], 
                                [  0.0 ,  0.0 ,  1.0 ]  ];

2. 그리고 임시로 입력배열과 출력배열을 담을 배열을 만들어준다. 이 때 임시 입력 배열 크기는 마스크의 크기를 고려해서 설정해주면 되는데, 이 예시에서는 3by3 행렬이므로 +2를 해주었다.
출력배열은 최종 출력 이미지에 필요한 값만 담으면 되므로 outHeight와 outWidth와 동일하게 설정하면 되겠다.
그리고 더 높은 완성도를 위해서는 임시 입력 배열의 가장자리 값도 비슷하게 설정해주면 좋겠지만, 일단은 간단하게 빈 공간은 127로 채우도록 한다.

                var tmpInImage = new Array(inH+2);
                for(var i=0; i<inH+2; i++)
                    tmpInImage[i] = new Array(inW+2).fill(127.0);

                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        tmpInImage[i+1][k+1] = inImage[i][k];

3. 만들어진 임시 입력배열 중앙에 inImage를 위치해 넣으면 된다.

                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        tmpInImage[i+1][k+1] = inImage[i][k];

4. 이제 마스크와 픽셀을 곱해줘야하는데, 하나의 픽셀에 마스크를 곱한 값을 넣어줘야 하기 때문에 for문 안에 마스크의 크기만큼 또 반복하는 for문을 넣어준다. 이때의 값은 임시 출력 배열에 저장한다.

                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        var S = 0.0;
                        for(var m=0; m<3; m++) 
                            for (var n=0; n<3; n++) 
                                S += tmpInImage[i+m][k+n] * mask[m][n];
                        
                        tmpOutImage[i][k] = S;
                    }
                }

5. 마스크 value의 합이 0일 경우, 대부분 127을 더해 후처리를 해준다.

                for (var i=0; i<outH; i++)
                    for (var k=0; k<outW; k++)
                        tmpOutImage[i][k] += 127.0;

6. 임시 출력 배열에 있는 것을 출력 배열에 옮겨 화면에 출력한다.

                for (var i=0; i<outH; i++)
                    for (var k=0; k<outW; k++)
                        outImage[i][k] = parseInt(tmpOutImage[i][k]);

                displayImage();

화소 영역 처리는 기본적으로 마스크의 값만 변하고 나머지는 거의 동일하다. 그러므로 마스크를 적용하는 방법만 잘 이해하면 나머지는 마스크를 찾아서 사용하면 된다.

 

1. 엠보싱

엠보싱은 입력 양상을 양각 형태로 보이게 하는 기술이다.

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

                var mask = [    [ -1.0 ,  0.0 ,  0.0 ], 
                                [  0.0 ,  0.0 ,  0.0 ], 
                                [  0.0 ,  0.0 ,  1.0 ]  ];

                var tmpInImage = new Array(inH+2);
                for(var i=0; i<inH+2; i++)
                    tmpInImage[i] = new Array(inW+2).fill(127.0);

                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        tmpInImage[i+1][k+1] = inImage[i][k];

                var tmpOutImage = new Array(outH);
                for(var i=0; i<outH; i++)
                    tmpOutImage[i] = new Array(outW);
 
                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        var S = 0.0;
                        for(var m=0; m<3; m++) 
                            for (var n=0; n<3; n++) 
                                S += tmpInImage[i+m][k+n] * mask[m][n];
                        
                        tmpOutImage[i][k] = S;
                    }
                }

                for (var i=0; i<outH; i++)
                    for (var k=0; k<outW; k++)
                        tmpOutImage[i][k] += 127.0;

                for (var i=0; i<outH; i++)
                    for (var k=0; k<outW; k++)
                        outImage[i][k] = parseInt(tmpOutImage[i][k]);

                displayImage();
            }

 

2. 기본 블러

기본 블러는 주변 픽셀에 동일한 가중치를 줘서 영역처리를 한다. 코드에서 보이듯이 9개의 픽셀에 1/9씩 가중치를 주었다.마스크의 합이 1이므로(마스크의 합은 무조건 0아니면 1이다) 후처리는 해주지 않는다.

           function blur() {

                outH = inH;
                outW = inW;

                outImage = new Array(outH);
                for(var i=0; i<outH; i++)
                    outImage[i] = new Array(outW);

                var mask = [    [ 1/9. ,  1/9.,  1/9. ], 
                                [  1/9. ,  1/9. , 1/9. ], 
                                [  1/9. ,  1/9. ,  1/9. ]  ];

                var tmpInImage = new Array(inH+2);
                for(var i=0; i<inH+2; i++)
                    tmpInImage[i] = new Array(inW+2).fill(127.0);
     
                for(var i=0; i<inH+2; i++) 
                    for (var k=0; k<inW+2; k++) 
                        tmpInImage[i][k] = 127.0;

                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        tmpInImage[i+1][k+1] = inImage[i][k];
                        
                var tmpOutImage = new Array(outH);
                for(var i=0; i<outH; i++)
                    tmpOutImage[i] = new Array(outW);

                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        var S = 0.0;
                        for(var m=0; m<3; m++) 
                            for (var n=0; n<3; n++) 
                                S += tmpInImage[i+m][k+n] * mask[m][n];
                        
                        tmpOutImage[i][k] = S;
                    }
                }

                for (var i=0; i<outH; i++)
                    for (var k=0; k<outW; k++)
                        outImage[i][k] = parseInt(tmpOutImage[i][k]);

                displayImage();
            }

3by3 행렬 즉, 픽셀의 바로 옆 픽셀들만 영역처리를 했기 때문에 블러 정도가 약하다. 만약 마스크의 행렬 크기를 크게 한다면 더 강한 블러효과를 낼 수 있다.

 

3. 가우시안 블러

가우시안 블러는 모두 동일한 가중치가 아닌, 중앙(원시픽셀)에 가장 큰 가중치를 주고 멀어질수록 점점 작은 가중치를 곱해준다. 기본 블러에서 마스크의 값만 바꿔주면 된다.

                var mask = [    [ 1/16. ,  1/8.,  1/16. ], 
                                [  1/8. ,  1/4. , 1/8. ], 
                                [  1/16. ,  1/8. ,  1/16. ]  ];

 

4. 모션 블러

모션블러는 흔들리는 방향으로만 가중치를 부여해서 구현할 수 있다. 
간단하게 수평 방향으로의 모션블러를 구현해보았다. 만약 수직 방향을 원한다면 마스크의 [0,1][1,1][2,1]의 값에 가중치를 주고 나머지는 0을 하면 된다.

                var mask = [    [ 0. ,  0.,  0. ], 
                                [  1/3. ,  1/3. , 1/3. ], 
                                [  0. ,  0. ,  0. ]  ];

마찬가지로 마스크의 크기가 크면 더 큰 효과를 볼 수 있을 것이다

 

5. 샤프닝

블러링과 반대되는 효과를 보이는 기법으로, 상세한 부분을 더욱 강조하여 대비효과를 증가시킨다. 

            function sharpen() {

                outH = inH;
                outW = inW;

                outImage = new Array(outH);
                for(var i=0; i<outH; i++)
                    outImage[i] = new Array(outW);

                var mask = [    [ 0. ,  -1.,  0. ], 
                                [  -1. ,  5. , -1. ], 
                                [  0. ,  -1. ,  0. ]  ];

                var tmpInImage = new Array(inH+2);
                for(var i=0; i<inH+2; i++)
                    tmpInImage[i] = new Array(inW+2).(127.0);
         
                for(var i=0; i<inH+2; i++) 
                    for (var k=0; k<inW+2; k++) 
                        tmpInImage[i][k] = 127.0;

                for(var i=0; i<inH; i++) 
                    for (var k=0; k<inW; k++) 
                        tmpInImage[i+1][k+1] = inImage[i][k];

                var tmpOutImage = new Array(outH);
                for(var i=0; i<outH; i++)
                    tmpOutImage[i] = new Array(outW);

                for(var i=0; i<inH; i++) {
                    for (var k=0; k<inW; k++) {
                        var S = 0.0;
                        for(var m=0; m<3; m++) 
                            for (var n=0; n<3; n++) 
                                S += tmpInImage[i+m][k+n] * mask[m][n];
                        
                        tmpOutImage[i][k] = S;
                    }
                }

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

                        if (tmpOutImage[i][k]> 255.0) tmpOutImage[i][k] = 255.0;
                        else if (tmpOutImage[i][k]<0) tmpOutImage[i][k] = 0.0;
                        else outImage[i][k] = parseInt(tmpOutImage[i][k]);

                displayImage();
            }

[0 -1 0][-1 5 -1][0 -1 0] 마스크로 샤프닝을 한 결과

[-1 -1 -1][-1 9 -1][-1 -1 -1] 마스크로 샤프닝을 한 결과

 

6. 윤곽선(엣지)

엣지는 다양한 방법이 있고, 방법에 따라 정확도와 선명도가 달라진다. 

[0, 0, 0][-1, 1, 0][0, 0, 0]

[-1, -1, 0][-1, 3, 0][0, 0, 0]

차연산자