[영상처리] 밝기 조절을 하기위한 함수 만들기

영상에는 픽셀마다 색상에 대한 값이 있다.

이 값에 원하는 만큼 수를 더하면 밝아지고, 빼면 어두워진다.

 

 

원하는 수는 슬라이드바로 받아오도록 하자.

var value = parseInt(document.getElementById("brightI").value);

 

밝기 조절을 위해서는 pixel + value > 255 대입해야 한다.

다만, 오버플로우를 막아야 하므로 if문을 사용하자.

if (pixel + value > 255){
	pixel = 255;
}
else if (pixel + value < 0) {
	pixel = 0;
}
else{
	pixel += value;
}

 

 

완성된 함수식

 

        function brightImage() {  // 영상 밝기 알고리즘
            // (중요!) 출력 영상의 크기를 결정... 알고리즘에 따름.
            outHeight = inHeight;
            outWidth = inWidth;
            // 출력 2차원 배열을 준비
            outImageArray = new Array(outHeight); // 256짜리 1차원 배열
            for(var i=0; i<outHeight; i++) 
                outImageArray[i] = new Array(outWidth);

            // ***** 진짜 영상처리 알고리즘 *****
            var value = parseInt(document.getElementById("brightI").value);
            for(var i=0; i<inHeight; i++) {
                for (var k=0; k<inWidth; k++) {
                    // 문자 --> 숫자
                    pixel = inImageArray[i][k].charCodeAt(0);
                    // **** 요기가 핵심 알고리즘. (밝게하기)
                    if (pixel + value > 255){
                        pixel = 255;
                    }
                    else if (pixel + value < 0) {
                        pixel = 0;
                    }
                    else{
                        pixel += value;
                    }
                    // 숫자 --> 문자
                    outImageArray[i][k] = String.fromCharCode(pixel);
                }
            }
            displayImage();
        }

 

 

얼마나 밝게 할지는 값을 받아와야 하므로 버튼을 만들고,

어둡게 하기 위해서는 값을 빼야 하므로 슬라이드바에는 -(마이너스)값도 들어가야 한다.

이는 min에 -255를 주면 된다.

<span type="button" id="chaedo" onclick="document.getElementById('brightI').style.display='block'">밝기</span>
<input type="range" max="255" min="-255" value="0" id="brightI" onclick="brightImage()" style = 'display: none'>