Canvas로 이미지 밝기 조정 (γ 보정)
γ값
간단히 말하면, 디스플레이의 화상의 계조 (색의 밝기의 단계)의 특성을 나타내는 값이다.
이하의 계산식으로 나타낼 수 있다.
出力 = (入力)^{\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일 때입니다.
(이해가 얕기 때문에 뭔가 부정확한 곳이 있으면, 코멘트나 편집 요구 부탁합니다.)
Reference
이 문제에 관하여(Canvas로 이미지 밝기 조정 (γ 보정)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sassy_watson/items/0ef916c3d13e4b597e2c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
