γ値
簡単にいえば、ディスプレイの画像の階調（色の明るさの段階）の特性を示す値である。
以下の計算式で表すことができる。
出力 = (入力)^{\frac{1}{γ}}
γ補正
ディスプレイの特性のよって、画像が暗く見えてしまったりするので、γ値を調整して、元々の画像に近いが明るさを調整する方法
補正で明るさを調整してみる
RGBそれぞれ、0から255までの値なので
出力 = 255\times(入力 \div 255)^{\frac{1}{γ}}
でγ値を変更数することで明るさを調整してみます。
以下がそのサンプルです。
gamma.html
<!DOCTYPE html>
<html>
<head>
<title>γ補正</title>
<script type="text/javascript">
window.onload = function() {
var gamma = 10;
var canvas = document.getElementById("c1");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "test.jpg";
img.onload = function() {
ctx.drawImage(img, 0, 0);
var src = ctx.getImageData(0, 0, canvas.width, canvas.height);
var dst = ctx.createImageData(canvas.width, canvas.height);
for (var i = 0; i < src.data.length; i=i+4) {
dst.data[i] = ~~(255 * Math.pow((src.data[i] / 255), 1 / gamma)); //R
dst.data[i+1] = ~~(255 * Math.pow((src.data[i+1] / 255), 1 / gamma)); //G
dst.data[i+2] = ~~(255 * Math.pow((src.data[i+2] / 255), 1 / gamma)); //B
dst.data[i+3] = src.data[i+3]; //A
}
ctx.putImageData(dst, 0, 0);
};
};
</script>
</head>
<body>
<canvas id="c1" width="300" height="300">
</body>
</html>
下記がγ値が2のときです。オリジナルの画像とならべてます。
下記がγ値が5のときです。
(理解が浅いのでなにか不正確なところがありましたら、コメントや編集リクエストお願いします。)