Javascript图像处理—亮度对比度应用案例

在JavaScript中，处理图像的亮度与对比度通常涉及到HTML的`

首先，你需要在HTML文件中添加一个`


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>调整图像亮度和对比度</title>
</head>
<body>
<img id="sourceImage" src="path_to_your_image.jpg" style="display:none;">
<canvas id="canvas"></canvas>
<script src="adjustBrightnessContrast.js"></script>
</body>
</html>

然后，在`adjustBrightnessContrast.js`文件中，你可以编写如下JavaScript代码来调整图像的亮度和对比度：


window.onload = function() {
    const img = document.getElementById('sourceImage');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // 设置canvas的大小与图像相同
    canvas.width = img.width;
    canvas.height = img.height;

    // 绘制原始图像
    ctx.drawImage(img, 0, 0);

    // 亮度(0-255)和对比度(1-3)的调整值
    const brightnessValue = 50; // 亮度值
    const contrastValue = 1.5; // 对比度值

    // 应用亮度与对比度调整
    adjustBrightnessContrast(canvas, brightnessValue, contrastValue);

    function adjustBrightnessContrast(canvas, brightness, contrast) {
        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;

        for (let i = 0; i < data.length; i += 4) {
            // 红
            data[i] = adjustPixel(data[i], brightness, contrast);
            // 绿
            data[i + 1] = adjustPixel(data[i + 1], brightness, contrast);
            // 蓝
            data[i + 2] = adjustPixel(data[i + 2], brightness, contrast);
            // 透明度（alpha）保持不变
        }

        // 将修改后的图像数据放回canvas
        ctx.putImageData(imageData, 0, 0);

        function adjustPixel(pixel, brightness, contrast) {
            let adjustedPixel = (pixel - 128) * contrast + 128 + brightness;
            adjustedPixel = Math.min(Math.max(adjustedPixel, 0), 255);
            adjustedPixel = Math.round(adjustedPixel);
            return adjustedPixel;
        }
    }
};

注意：

1. 替换`path_to_your_image.jpg`为你自己的图像路径。

2. 亮度值`brightnessValue`可以是-255到255之间的任何整数，用于增加或减少图像的亮度。

3. 对比度值`contrastValue`通常大于1表示增加对比度，小于1表示减少对比度，但不应为0或负数。

4. 本示例中的`adjustBrightnessContrast`函数会遍历图像的每个像素，根据给定的亮度和对比度值进行调整。调整后的像素值会被限制在0到255之间。