본문 바로가기

728x90

🖥️135

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.

[Java] 자바를 한다면 알아야 하는 용어들 컴퓨터 프로그래밍 언어는 크게 컴파일 언어와 인터프리터 언어로 나뉜다. 컴파일 언어(C, C++ ..)는 번역과 실행이 따로 이루어지는 언어이고, 인터프리터 언어(Python, JavaScript ..)는 번역과 실행을 동시에 진행하는 언어이다. 인터프리터 언어는 소스코드를 줄 단위로 번역하고 실행하기 때문에 실행이 느리지만, 오류가 있으면 그 줄 아래로는 아예 실행이 안되기 때문에 디버깅이 쉽다는 장점이 있다. 컴파일 언어는 컴파일이 오래걸릴 수 있지만 한 번 컴파일이 됐으면 실행만 시키면 되기 때문에 실행은 빨리 할 수 있다. 하지만 운영체제마다 실행할 수 있는 기계어가 다를 수 있고, 그런 경우에는 그 OS에 맞는 언어로 다시 컴파일을 해줘야한다. Java는 얼핏 보면 당연히 컴파일 언어 같지만, .. 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로 영상처리 소프트웨어 만들기 (Beta ver.): RAW 이미지 파일 불러오기 Alpha 버전에서는 난수로 했다면, 이번에는 한 단계를 업해서 진짜 이미지에 영상처리 알고리즘을 적용해보고자 한다. 일반 파일(BMP, JPG, PNG, TIF, GIF 등)은 이미지처리하기 많이 어려운데, RAW 이미지 파일은 1byte가 1개의 픽셀을 의미하기 때문에 비교적 쉽게 가능하지만, 행과 열이 같아야 한다는 제한이 있다.Alpha버전과 알고리즘은 같아도 이번엔 난수가 아닌 이미지 파일을 불러와야하기 때문에, 기본 작업을 먼저 세팅해야 한다. 1. 파일을 선택해서 불러올 수 있게 파일을 읽어오는 버튼을 만든다. 2. 캔버스 만들고 기본값 설정한다. 3. 캔버스 기본 툴(도화지 물감 준비)을 함수로 만들어서 기본값으로 실행되도록 하자 4. raw 이미지 파일을 열면 캔버스에 나타나도록 해야하므.. 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.

이전 1 ··· 9 10 11 12 13 14 15 ··· 17 다음

728x90

티스토리툴바

"); wcs_do();