자바스크립트 이미지 처리 - 밝기 및 대비 응용 사례_기본 지식

머리말

이전 기사 에서는 이미지 처리 중 컨볼루션 연산과 스무딩(즉, 블러) 처리에 대해 설명했습니다. 이번 기사에서는 밝기와 대비를 변경합니다.

사실 밝기란 무엇일까요?

밝기가 참 눈길을 끈다...

사실 RGBA 색상 공간의 경우 밝아진다는 것은 실제로 R, G, B 세 채널이 동시에 증가하는 것을 의미하므로 어두워진다는 것은 동시에 감소한다는 의미입니다.

가장 어두운 검정색이 RGB(0,0,0)이고, 가장 밝은 흰색이 RGB(255,255,255)이기 때문에 이해하기 쉽습니다. 따라서 밝기를 높이려면 각 RGB 채널을 늘려야 합니다.

그럼 대비는 어떨까요?

대비는 실제로 색상의 차이입니다.

따라서 RGBA 색상 공간의 경우 대비를 높이는 것은 실제로 R, G, B의 세 채널에 동시에 비율을 곱하는 것과 같습니다. 이렇게 하면 유사한 색상 사이의 간격이 더 커지므로 이는 Yes로 나누는 것을 의미합니다.

예를 들어 RGB(23,44,55)와 RGB(33,44,55)의 원래 차이는 10에 불과하지만 2를 곱하면 RGB(46,88,110), RGB가 됩니다. (66,88,110)

차이가 20이 됩니다. 즉, "색상 차이"가 더 커집니다.

선형모형

newRGB = 대비 * RGB 밝기

선형 모델은 위의 수식을 만족하며, 여기서 Contrast는 대비 계수를 나타내고, Brightness는 밝기 계수를 나타냅니다.

선형 모델은 구현이 비교적 간단하지만 올화이트 또는 올블랙 사진을 조정하기가 쉽지만 일반 사용자의 경우 명암과 밝기 물론이죠.

그래서 실제로 포토샵에서 사용하는 것은 선형 모델이 아닌 비선형 모델입니다.

비선형 모델

비선형 모델의 대비 증가는 임계값과 관련이 있습니다.

대비 >= 0인 경우:

newRGB = RGB(RGB - 임계값) * (1 / (1 - 대비 / 255) - 1)

대비가 < 인 경우

newRGB = RGB(RGB - 임계값) * 대비 / 255

대비와 밝기를 동시에 조정하면 어떨까요?

대비가 0보다 크면 먼저 밝기를 조정한 다음 대비를 조정합니다. 대비가 0보다 작으면 그 반대입니다. 대비를 먼저 조정한 다음 밝기를 조정합니다.

마지막 질문은 임계값이 정확히 무엇인지입니다. 실제로 이것은 이미지의 평균 회색 수준입니다.

구현 코드

코드 복사 코드는 다음과 같습니다.

var BrightnessContrast = function(__src, __brightness, __contrast){
__src || error(arguments.callee, IS_UNDEFINED_OR_NULL/* {line} */)
if(__src.type === "CV_RGBA" ){
var sData = __src.data,
width = __src.col,
height = __src.row,
dst = new Mat(height, width, CV_RGBA),
dData = dst.data ,
밝기 = Math.max(-255, Math.min(255, __brightness || 0)),
대비 = Math.max(-255, Math.min(255, __contrast || 0)) ;

var grey = cvtColor(__src, CV_RGBA2GRAY),
allValue = 0,
gData = grey.data;
var y, x, c; 🎜>for(y = 높이; y--;){
for(x = 너비; x--;){
allValue = gData[y * 너비 x]
}
}

var r, g, b, offset, gAverage = (allValue / (높이 * 너비)) 0

for(y = 높이; y--;){
for(x = 너비; x--;){
offset = (y * 너비 x) * 4
dData[offset] = sData[offset] 밝기 ] 밝기; ] = sData[오프셋 2] 밝기;

if(대비 >= 0){
for(c = 3; c--;){
if(dData[오프셋 c] > ;= gAverage){
dData[offset c] = dData[offset c] (255 - gAverage) * 대비 / 255;
}else{
dData[ offset c] = dData[offset c] - (gAverage * 대비 / 255)
}
}
}else{
dData[offset] = dData[offset] (dData[offset] - gAverage) * 대비 / 255; dData[오프셋 1] = dData[오프셋 1] (dData[오프셋 1] - gAverage) * 대비 / 255;
dData[오프셋 2] = dData[오프셋 2] ( dData[오프셋 2] - gAverage) * 대비 / 255;

dData[오프셋 3] = 255;
}
}
}else{
error( 인수.callee, UNSPPORT_DATA_TYPE/* {line} */);
}
return dst;



효과

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.