Javascript画像処理～明るさとコントラストの応用事例_基礎知識

はしがき

前回の記事では、画像処理におけるコンボリューション演算とスムージング（つまりぼかし）処理について説明しましたが、今回は明るさとコントラストを変更します。

そもそも明るさとは何でしょうか？

その明るさはかなり目を引きます...

実際、RGBA 色空間の場合、明るくするということは、R、G、B の 3 つのチャネルを同時に増やすことを意味し、暗くするということは同時に減らすことを意味します。

最も暗い黒は RGB(0,0,0) で、最も明るい白は RGB(255,255,255) であるため、これは理解しやすいです。したがって、明るくする場合は、RGB の各チャネルを増やす必要があります。

では、コントラストについてはどうでしょうか?

コントラストは実際には色の違いです。

RGBA 色空間の場合、コントラストを高めることは、実際には、R、G、B の 3 つのチャネルに同時に比率を掛けることと同じです。これにより、類似した色の間のギャップが大きくなり、コントラストが減少します。それはYesで割ることを意味します。

たとえば、RGB(23,44,55) と RGB(33,44,55) の元の差は 10 だけですが、2 倍すると、RGB(46,88,110) と RGB になります。 (66,88,110)

では、その差は20となり、「色差」が大きくなります。

線形モデル

newRGB = コントラスト * RGB 輝度

線形モデルは上記の式を満たします。ここで、Contrast はコントラスト係数を表し、Brightness は明るさ係数を表します。

線形モデルは実装が比較的簡単ですが、全白または全黒の写真を調整するのは簡単ですが、コントラストとのどちらが優れているかを選択するのは困難です。 🎜>明るさ 確かに。

つまり、Photoshop で実際に使用されるのは線形モデルではなく、非線形モデルです。

非線形モデル

非線形モデルのコントラストの増加は、しきい値 Threshold に関連しています:

コントラスト >= 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} */); ){
var sData = __src.data,
width = __src.col,
height = __src.row,
dst = new Mat(height, width, CV_RGBA),
dData = dst.data ,
brightness = Math.max(-255, Math.min(255, __brightness || 0)),
contrast = Math.max(-255, Math.min(255, __contrast || 0) 0)) ;

var grey = cvtColor(__src, CV_RGBA2GRAY),
allValue = 0,
gData = grey.data; 🎜>for (y = 高さ; y--;){
for(x = 幅; x--;){
allValue = gData[y * width x]
}
}

var r, g, b, offset, gAverage = (allValue / (高さ * 幅)) 0;

for(y = height; y--;) | for(x = width; x--;){
offset = (y * width x) * 4;
dData[offset] = sData[offset] 明るさ ]
dData[offset 2] ] = 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] - (g平均 * コントラスト / 255);
}
}
}else{
dData[オフセット] = dData[オフセット] (dData[オフセット] - g平均) * コントラスト
; dData[オフセット 1] = dData[オフセット 1] (dData[オフセット 1] - g平均) * コントラスト / 255;
dData[オフセット 2] = dData[オフセット 2] ( dData[オフセット 2] - g平均) * コントラスト/ 255;
}

dData[オフセット 3] = 255;
}
}
}else{
error( argument.callee, UNSPPORT_DATA_TYPE/* {line} */);
}
dst を返す
};



効果