JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 확대 시 화질개선에 대한 생각

그림을 그릴 때 화질 낮은 것을 확대했을 때 픽셀 보이는 것을 싫어했기 때문에 항상 사이즈가 큰 캔버스에 그린 후 축소하는 식으로 했다. 그래서인지 확대 알고리즘을 적용할 때도 픽셀 보이는 게 매우 거슬렸고.. 화질 개선을 위해 계속 고민을 해보았다.

일단 픽셀로 보이는 이유는 가장 인접한 이웃 픽셀로 보간을 하다 보니 네 개의 근접한 픽셀의 값이 같아서이다. 

이렇게 4개 값이 모두 같아서 발생하는 문제이니, 적당한 근거를 찾아 4개의 값 중 일부를 변환하면 되지 않을까 하는 생각이 들었다.

그리고 그 근거는 주변 값(위아래 양옆 픽셀)의 평균으로 하기로 했다.

이렇게 네 개의 값으로 선정한 이유는 기존 픽셀값에 대한 가중치가 높기 때문이다.
4개의 평균을 구하는데, 4개 중에 기존의 픽셀값이 2개가 겹치므로 기존 픽셀에 대한 가중치가 더 높아지게 된다. 즉, 주변 값에 영향도 받지만 기존 값의 영향을 제일 크게 받게 된다.
위의 그림으로 보자면, (1,1)에 있는 빨간색 값은 기존 빨강의 값 2개와 노랑 값 1개, 초록 값 1개를 받게 되므로 세 값 중에서 기존 빨강의 값에 제일 가깝게 된다.
이런 식으로 서로 영향을 받지 않는 칸들을 먼저 적용시켜보았다.

기존 이웃 화소 보간법으로 한 2배 확장

평균 처리해서 1차 화질개선을 한 모습

다시 한 번 더 평균처리를 하게 되면 픽셀의 형태는 사라지게 된다

 

기본 블러링도 이렇게 주변 픽셀값의 평균으로 하기 때문에 블러링과 유사하게 되었다. 그래서 크기가 작은 이미지에 적용하면 1차까지 가공한 게 나을 것 같기도 하다.
하지만 이를 응용해서 사진을 확대할 때 그 사이즈로 바로 늘리지 않고, 일정 픽셀을 늘리고 화질개선을 하고, 일정 픽셀을 늘리고 화질개선을 하고를 목표치까지 반복하면 상당히 고퀄리티 확대 프로그램이 되지 않을까 싶다. 가능하더라도 자바스크립트로 굳이 하진 않을 것 같다..

 

전

후, 수염과 눈 부분을 보면 상당히 부드러워진 것을 확인할 수 있다.