JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 블러 효과 조절하기 + 경계값 처리하기

마스크의 크기를 value by value로 가변행렬로 받아서 value값에 따라 변하게 할 수도 있겠지만, 
가우시안 블러가 아니라 기본 블러로 한다면 마스크를 쓰지 않고도 구현할 수 있을 것이다.

1. value가 1이라면 원시 픽셀로부터 1만큼 거리에 있는 픽셀들의 평균을 받는다. 즉, 원시 픽셀을 포함해 3by3크기 행렬 안에 있는 픽셀을 평균으로 받게 된다.
value가 2면 5by5행렬, value가 3이면 7by7행렬, value가 n이면 (2n+1) by (2n+1) 행렬 안에 있는 픽셀들의 평균을 받는 것이다.

2. 가장자리에 있는 픽셀을 위해서 (2value+width) by (2value+width) 크기의 임시 입력 배열을 만들어주고, 127로 채워준다. 더 높은 완성도를 위해서는 가장자리 픽셀과 같은 값으로 늘려주면 되는데, 중요도에 비해서 코드가 복잡해질 것 같아서 그냥 중간 값인 127.0으로 채우는 것으로 했다.

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

3. 만든 임시 배열 가운데에 inImage를 옮겨준다.

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

4. 이제 마스크랑 동일하게 주변 픽셀들의 평균을 구해서 원시 픽셀에 그 값을 넣으면 되므로, for 문 안에 for문을 또 사용하면 될 것이다.

               for (i=value; i<outH+value; i++) {
                    for (k=value; k<outW+value; k++) {
                        var sum =0;
                        for (n=0; n<2*value+1; n++) {
                            for (m=0; m<2*value+1; m++) {
                                sum += tmpInImage[i+value-n][k+value-m];

5. 임시 입력 배열에서 다시 불필요한 부분 (value만큼 늘린 부분)을 잘라내어 outImage에 넣으면 된다.

outImage[i-value][k-value] = (sum) / ((2*value+1)*(2*value+1));

 

결과 확인

value=3인 결과

value=10인 결과