[2023.04.11~04.16] 토이 프로젝트: OpenCV 없이 JavaScript로 구현하는 영상처리 소프트웨어

 

프로젝트 명: OpenCV 없이 JavaScript로 구현하는 영상처리 소프트웨어

영상처리 프로그램은 대부분 오픈소스로 공개되어 있는 OpenCV를 사용한다. OpenCV는 Open Source Computer Vision의 약자로 다양한 영상/동영상 처리에 사용할 수 있는 오픈소스 라이브러리로, 인텔이 컴퓨터 비전과 인공지능을 발달시키고자 하는 바람으로 출시한 것이다. 

하지만 이번 프로젝트에서는 OpenCV를 사용하지 않고, JavaScript, HTML5, CSS으로 영상처리 알고리즘을 이해하고 코드화하여 영상처리 소프트웨어를 만들어보려고 한다.

 

먼저 최종 완성된 영상처리 소프트웨어 시연 영상이다.

 

 

Step 1: 간단한 난수 배열로 영상처리 알고리즘 이해하고 적용해보기

영상처리에 사용되는 기본적인 알고리즘을 바로 이미지 파일에 적용시키기 전에, 단순한 난수 배열에 영상처리 알고리즘이 어떻게 적용되는지 보기로 했다. 단순한 배열로 표현을 해보니 이해하기도 훨씬 쉬웠고, 코드를 짜보는 것도 알고리즘만 이해하면 어렵지 않았다. 
난수 배열에 적용시킨 알고리즘은 다음 단계에서도 똑같이 반복되므로, 자세히 보고싶으면 밑의 링크를 참고하면 된다.

난수 배열에 영상처리 알고리즘 적용하기: https://hanav.tistory.com/130

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

 

Step2: RAW 이미지 파일에 영상처리 알고리즘 적용해보기

영상처리 알고리즘을 이해하고 적용시켜봤다면, 실제 RAW 이미지 파일에 적용을 시켜볼 차례이다. RAW 이미지는 말 그대로 날것의, 가공되지 않은 이미지 데이터이다.  JPEG, PNG 등은 이미 가공되어 압축되어 있는 형태라 사용하기 어렵지만, RAW 이미지 파일은 빛을 전기신호로 기록한 순수한 데이터 자체이므로 사용이 가능하다.

난수 배열이 아닌 이미지 파일에 적용할 때는 고려해야할 점이 있다.
먼저 이미지 파일은 RGB값과 Alpha 값이 묶여서 하나의 픽셀로 나타난다는 점이다. 난수 배열에서는 하나의 픽셀이 하나의 숫자였다면, 이미지 파일에서는 (r, g, b, alpha) 가 하나의 픽셀이 된다. 여기서 만약 칼라 사진을 적용시킨다면 RGB값이 모두 달라 삼차원 배열을 설정해야 하겠지만, 이번 프로젝트에서는 간단하게 GrayScale 이미지를 사용할 것이다. GrayScale 이미지는 R=G=B (Alpha 값도 255, 투명도가 없는 이미지 파일을 사용)이므로 이차원 배열만 있어도 구현할 수 있다.
또한, HTML5 캔버스는 선과 면은 표현 가능하지만 점은 표현하지 못한다. 그래서 픽셀값 하나하나를 불러와 모여 있는 이미지를 표현할 수 없는데, 이는 픽셀 값을 모아서 임의의 종이에 먼저 붙이고, 종이를 캔버스에 붙이는 방식으로 해결하기로 했다.

적용한 알고리즘에 대해서는 다음 단계에 모아서 설명하도록 하겠다.

RAW 이미지 파일을 캔버스에 불러올 수 있게 코드 짜기: https://hanav.tistory.com/132

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

 

Step3: 영상처리 심화 알고리즘 학습하고 적용해보기

1) 화소 점 처리

화소 점 처리란, 주변 화소 값에 상관없이 단순히 그 값만 변하는 것을 말한다. 가장 기본적으로 생각할 수 있는 것은 더하기, 빼기, 곱하기, 나누기의 산술연산을 적용하는 것이다. 픽셀의 값이 커질수록 명도가 높아진다는 것을 고려하면, 산술연산을 적용했을 때 다음과 같은 효과를 볼 수 있다.

-더하기 = 밝게 하기
-빼기 = 어둡게 하기
-곱하기 = 밝게하는데 밝은 곳은 더 밝아지고, 어두운 곳은 덜 밝아지게 하기
-나누기 = 어둡게 하는데 어두운 곳은 더 어두워지고, 밝은 곳은 덜 어둡게 하기

더하기와 빼기, 곱하기와 나누기는 결국 같으므로 같이 조절할 수 있게 설정하였다. 그리고 0부터 255까지의 값만 가능하므로, 0이나 255를 벗어나는 경우가 발생하면 각각 0과 255로 받도록 제한조건도 설정해주었다.

                        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;

                        outImage[i][k] = inImage[i][k] * value;

또한, 색상을 반전시키는 것도 최대 명도값인 255에서 이전 픽셀값을 빼주면 되기 때문에 매우 간단하게 표현 가능하다.

                        outImage[i][k] = 255 - inImage[i][k];

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

2) 히스토그램 처리

히스토그램이란 우리가 흔히 보던 막대그래프라고 보면 된다. (막대그래프와의 차이점이라면, 히스토그램은 연속적인 데이터에 사용되어서 막대 사이에 빈칸이 없다는 점이다) 가로축에는 명도, 세로축에는 그 명도값을 가진 화수의 수가 된다. 즉, 우리는 히스토그램으로 명도의 분포를 파악할 수 있고, 이를 잘 사용하면 명도 대비에 변화를 줄  수 있다.

히스토그램을 이용할 수 있는 제일 간단한 예는 이미지를 오직 255 또는 0으로 나타내는 고대비 이미지를 만들 때이다. 그냥 편하게 255와 0의 중간값인 127.5를 기준으로 할 수도 있지만, 만약 사진 자체가 밝아서 모두 128보다 큰 명도값을 갖는다면 전체가 하얀색으로 될 것이다. 이 때, 히스토그램을 활용해서 전체 이미지의 명도 분포를 바탕으로 기준값을 설정해주면 더 안전하고 고르게 고대비 효과를 줄 수 있다.

//127.5를 기준으로 고대비 처리

                            if (inImage[i][k] > (0 + 255)/2) {
                                outImage[i][k] =  255;
                            } else {
                                outImage[i][k] = 0;
                            }
                            
//히스토그램 평균을 기준으로 고대비 처리
                avgValue = hapValue / (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;
                        }
                    }
                        
//히스토그램 중간값을 기준으로 고대비 처리
                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;
                    }

 

좀 더 심화 이론으로 들어가자면, 왼쪽 이미지처럼 히스토그램의 명암 분포를 늘림으로써 낮은 명암대비를 보이는 영상의 화질을 향상시킬 수도 있다. 가장 기본적인 명암대비 스트레칭의 공식은 다음과 같다.

다만 이 방법은 0과 255의 값이 각각 하나라도 존재하면, 스트레칭할 공간이 없기 때문에 효과가 없다. 그럼에도 좀 더 선명한 명도대비를 원한다면, high값을 강제로 낮추고 low 값을 강제로 높혀서 공간을 만들고 스트레칭을 하면 더욱 선명한 명도 대비를 보이게 할 수 있다. 이 기법이 바로 엔드-인 탐색이다. 엔드-인 탐색은 일정 양의 화소를 흰색이나 검정색으로 지정해서 히스토그램의 분포를 좀 더 균일하게 만들 수 있다.

여기서 high, low값은 어느정도 이상을 흰색/검은색으로 지정할 것인지를 뜻한다.

다만, 엔드인은 명도가 한 쪽으로 치우쳐진 (너무 어둡거나 너무 밝은) 이미지는 적용하기 위험하다. 맨 끝 50씩을 잘라버리기 때문이다.  만약 어두운 사진의 명도대비를 뚜렷하게 하고 싶다면, 평활화 기법을 사용하는 것이 제일 적합하다. 평활화는 영상의 밝기 분포를 재분배하여 명암대비를 최대로 높이는 기법이다. 정규화를 통해 진행되기 때문에 각 명암의 빈도는 변경하지 않아서 어두운 사진에는 정말 효과적이라고 볼 수 있다.

3) 기하학적 변환

기하학적 변환은 화소의 공간적 위치를 재배치하는 것이다. 즉, 명도값이 변하는 것이 아니라 위치만 변한다. 제일 단순한 것은 좌우반전과 상하반전이다. 생각하기도 쉽고 코드도 단순하다.

//상하반전
outImage[i][k] = inImage[outH - i - 1][k];

//좌우반전
outImage[i][k] = inImage[i][outW - k -1];

이미지를 회전시키는 것도 픽셀의 위치만 변하면 된다. 이 때 회전하려는 영상의 중심점도 고려해서 수학적 좌표로 변환하여 계산한 결과는 아래와 같다. 그리고 회전을 하게 되면 배열의 크기도 더 커지기 때문에, 배열의 크기도 받는 value값에 따라 유동적으로 변하게 설정해두었다.

출력 이미지의 크기

이미지를 확대/축소 시키는 알고리즘도 같은 픽셀을 늘리고 줄이면 되기 때문에 단순하다. 하지만 더 잘 축소하고 확대하려면 알고리즘이 더 복잡해진다.

이미지 축소는 단순하게 4개의 명도값 중 임의로 하나를 골라서 배열의 크기를 1/2로 줄일 수도 있겠지만, 이렇게 하면 축소시 경계가 깨져서 나타나게 된다. 따라서, 나는 더 나은 화질을 위해 4개의 평균을 출력 픽셀값으로 받기로 했다. 이미지 축소는 배열의 행렬 크기를 1/2배로 줄여야 하므로,  출력 이미지의 배열도 1/2배인 크기로 만들어준다. (홀수라면 그냥 제일 끝의 행렬을 제거하였다) 또한, 축소될 때 2x2 크기의 배열이 1x1크기로 되기 때문에 네 개의 value값의 평균을 내어 새로운 하나의 value를 지정하였다.

//화질 개선을 고려하지 않은 축소
outImage[parseInt(i*scale)][parseInt(k*scale)] = inImage[i][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;

왼) 화질 개선이 고려되지 않은 축소, 오) 화질 개선이 고려된 축소

2배 확대도 마찬가지이다. 화질을 고려하지 않고 그냥 인접한 4개의 픽셀을 같은 값으로 할 수 있는데, 이는 픽셀 형태가 2배로 늘어나기 때문에 경계면이 매끄럽지 못하다. 따라서 고안한 방법은 원시 화소의 값의 가중치를 제일 높게 잡은 상태에서 주변 화소들의 값을 고려하여 출력 픽셀값을 받는 것이었다. 2배 확대의 화질개선에 대해서는 밑의 링크에 자세하게 적혀있고, 여기에는 공식과 결과만을 첨부하겠다.

//화질 개선을 고려하지 않은 2배 확대
outImage[i][k] = inImage[parseInt(i/2)][parseInt(k/2)];

2배 확대 알고리즘 화질 개선하기: https://hanav.tistory.com/140

4) 화소 영역 처리

화소 영역 처리는 주변 화소의 값도 같이 고려하는 공간 영역을 계산한다. 이 처리를 하기 위해서는 주변 픽셀에 가중치를 곱하여 계산하는데, 이 때 마스크를 사용한다. 마스크를 사용하여 곱할 때는 마스크의 크기-1만큼 더 큰 임시 입력 배열을 만들어야 한다. 더 높은 완성도를 위해서는 임시 입력 배열의 가장자리 값도 비슷하게 설정해주면 좋겠지만, 일단은 간단하게 빈 공간은 127로 채워서 계산하였다. 만들어진 임시 입력 배열에 이미지를 넣고, 가중치 계산을 해주면 된다.

화소 영역 처리는 마스크를 사용하는 기본적인 원리는 다 같고, 주변 화소와 원시 화소간의 가중치에 따라 효과가 다르게 나온다. 각 효과의 자세한 코드와 설명은 밑의 링크를 참고하길 바란다.

https://hanav.tistory.com/138

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

더 나아가, 가장 기본적인 블러 효과를 조절할 수 있도록 코드를 짜보았다. 마스크의 크기가 커질수록 블러 효과는 점점 더 강해지기 때문에, 마스크의 크기를 value라 두고 값을 입력받았다. 하지만 가변행렬을 코드로 짜기에는 어려워보였고, 단순 평균 계산이기 때문에 어렵지 않게 이중 for문 안에 또 이중 for문이 반복되는 형태로 나타낸다면 충분히 구현할 수 있을 것이라고 생각했다.

이때도 임시 입력 배열의 빈 공간은 127.0으로 채워주었다. 자세한 설명과 코드는 밑의 링크에 정리해두었다.

https://hanav.tistory.com/142

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

 

Step4: UI 개선하기

기본적인 알고리즘은 다 구현이 되었으면 UI도 중요하기 때문에 많이 수정을 하였다.
먼저 select option 태그는 편의성도 그렇고 디자인적으로 많이 별로라고 느껴져서 list와 submenu를 새로 만들어 수정하였다.

또한, 효과를 중복 적용하고 싶다는 생각도 들어 현재 효과를 적용할 수 있는 함수를 만들어 버튼과 연동시켰다. 효과를 적용하는 함수는 출력 이미지를 입력 이미지로 바꿔주면 된다.

마지막으로, 오류가 나는 경우는 오류가 발생하기 전에 알람창이 뜨도록 설정하였다. 다음과 같은 경우에는 알람창이 떠서 실행이 되지 않는다.
-효과를 적용하지 않았는데 적용 버튼을 눌렀을 때
-원하는 각도로 회전 효과에 0~360 사이의 값이 아닌 숫자를 입력했을 때
-첫 이미지보다 더 큰 이미지로 만드는 효과를 적용시킬 때