본문 바로가기
728x90

JavaScript6

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로 채워준다. 더 높은 완성도를 위해서는 가.. 2023. 4. 14.
JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 확대 시 화질개선에 대한 생각 그림을 그릴 때 화질 낮은 것을 확대했을 때 픽셀 보이는 것을 싫어했기 때문에 항상 사이즈가 큰 캔버스에 그린 후 축소하는 식으로 했다. 그래서인지 확대 알고리즘을 적용할 때도 픽셀 보이는 게 매우 거슬렸고.. 화질 개선을 위해 계속 고민을 해보았다. 일단 픽셀로 보이는 이유는 가장 인접한 이웃 픽셀로 보간을 하다 보니 네 개의 근접한 픽셀의 값이 같아서이다. 이렇게 4개 값이 모두 같아서 발생하는 문제이니, 적당한 근거를 찾아 4개의 값 중 일부를 변환하면 되지 않을까 하는 생각이 들었다. 그리고 그 근거는 주변 값(위아래 양옆 픽셀)의 평균으로 하기로 했다. 이렇게 네 개의 값으로 선정한 이유는 기존 픽셀값에 대한 가중치가 높기 때문이다. 4개의 평균을 구하는데, 4개 중에 기존의 픽셀값이 2개가 겹.. 2023. 4. 13.
JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): 히스토그램 처리, 곱하기, 카툰효과 1. 히스토그램 처리를 사용한 고대비 처리 기존 고대비 효과는 0과 255의 평균인 127.5 값을 기준으로 그보다 크면 255, 작으면 0으로 처리하였다. 하지만 만약 사진이 이미 밝은 편이어서 모두 128 이상이라면? 아니면 모두 127 이하라면? 원본 이미지에는 분명 명도 차이가 있지만, 이 효과를 적용하면 전부 같은 흰색이나 검은색으로 나타날 것이다. 아래 사진도 배경과 털이 모두 255로 처리되어서 배경과 차이가 없어졌다. 이를 해결하기 위해 단순히 127.5를 기준으로 잡지 않고, 전체 픽셀들의 분포를 기준으로 잡도록 할 수 있다. 이를 히스토그램 처리라고 한다. 다음은 전체 픽셀의 평균과 중간값을 기준으로 한 영상처리이다. function blackWhite2() { out(inH, inW).. 2023. 4. 13.
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.. 2023. 4. 13.
JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 밝기조절, 색상 변경, 미러링, 회전, 확대/축소, 블러효과 이전 글: JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 파일 불러오기 (tistory.com) JavaScript로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 파일 불러오기 Alpha 버전에서는 난수로 했다면, 이번에는 한 단계를 업해서 진짜 이미지에 영상처리 알고리즘을 적용해보고자 한다. 일반 파일(BMP, JPG, PNG, TIF, GIF 등)은 이미지처리하기 많이 어려운데, RAW 이미 hanav.tistory.com 0. 틀 준비하기 우선 입력된 이미지(inImage)와 영상처리를 거친 이미지(outImage)를 분리해 줄 필요가 있으므로, out에 대한 변수와 함수도 전부 지정해 준다. 그리고 다양한 효과를 적용시킬 수 있는 sele.. 2023. 4. 12.
JavaScript로 영상처리 소프트웨어 만들기 (Alpha ver.) : 이미지 밝기조절, 색상 변경, 미러링, 회전, 확대/축소, 다이아몬드로 만들기 *알고리즘 연습용으로 rgb를 임의의 숫자(math.random()*256)로 대체함. *정사각형인 GrayScale이미지라 가정함. 1. 이미지 원본 그대로 //함수 선언부 function display(image, height, width) { for(var i=0; i 2023. 4. 11.
728x90

티스토리툴바

"); wcs_do();