图像处理之亮度与对比度

发表于

这个公式可以解释对图像的亮度和对比度操作的原理

  • α能使图像像素成倍数的增长或降低（α<1），使图像的差值有线性变化，从而改变了图像的对比度。
  • β可为负，也可为正。任何一个像素加上或减去一个值会使这个像素点向白色或向黑色靠近，从而改变了图像的亮度。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body>
    <input onchange="f(this)" type="file">
    <img width="250" height="250" id="scream">
    <canvas id="myCanvas" width="250" height="250" style="border:1px solid #d3d3d3;">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>
    <script>
    function f(inputBtn) {
        let url = URL.createObjectURL(inputBtn.files[0]);
        var c = document.getElementById("myCanvas");
        var ctx = c.getContext("2d");
        var img = document.getElementById("scream");
        img.onload = function() {
            ctx.drawImage(img, 0, 0, img.width, img.height);
            var imgData = ctx.getImageData(0, 0, c.width, c.height);
            //对比度系数
            let Contrast  = 1.2;
            //亮度增量
            let brightness = 10;
            for (var i = 0; i < imgData.data.length; i += 4) {
                let r = imgData.data[i] * Contrast + brightness;
                let g = imgData.data[i + 1] * Contrast + brightness;
                let b = imgData.data[i + 2] * Contrast + brightness;
                imgData.data[i] = r;
				imgData.data[i + 1] = g;
				imgData.data[i + 2] = b;
                imgData.data[i + 3] = 255;
            }
            ctx.putImageData(imgData, 0, 0);
        }
        img.src = url;
    };
    </script>
</body>

</html>