如何使用给定JavaScript代码实现图像灰度化？

灰度化计算公式 #

手册中给出三种图像灰度化计算公式：

1. 最大最小均值法：

f(x,y) = (max(R, G, B) + min(R, G, B)) / 2

2. 亮度加权平均法：

f(x,y) = (0.21 * R + 0.72 * G + 0.07 * B)

3. 简单均值法：

f(x,y) = (R + G + B) / 3

问题说明 #

已实现简单均值法，且写出最大最小均值法的计算逻辑，但未完成灰度化赋值，需要修改JavaScript代码完成图像灰度化。

修正后的代码 #

JavaScript代码修改 #

在循环中计算出灰度值后，将红、绿、蓝三个通道的值都设置为该灰度值即可完成灰度化。以下是修正后的完整JavaScript代码：

var mySrcImg = new Image();
mySrcImg.crossOrigin = "";
mySrcImg.onload = test;
mySrcImg.src = "Your image"; // 替换为实际图片路径

function test() {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");                  
    context.fillStyle = "rgb(0,200,0)";
    context.fillRect(0, 0, 800, 800);
    // 复制图片到画布
    context.drawImage(mySrcImg, 0, 0);
    // 获取图像数据
    var myImageData = context.getImageData(0, 0, canvas.width, canvas.height);                  
    var pixelComponents = myImageData.data;
    var n = pixelComponents.length;
    
    for (var i = 0; i < n; i += 4) {
        // --- 最大最小均值法 ---
        var maxVal = Math.max(pixelComponents[i], pixelComponents[i+1], pixelComponents[i+2]);
        var minVal = Math.min(pixelComponents[i], pixelComponents[i+1], pixelComponents[i+2]);
        var grayVal = (maxVal + minVal) / 2;

        // --- 若要切换为其他方法，注释上面三行，取消下面对应方法的注释 ---
        // // 亮度加权平均法
        // var grayVal = 0.21 * pixelComponents[i] + 0.72 * pixelComponents[i+1] + 0.07 * pixelComponents[i+2];
        // // 简单均值法
        // var grayVal = (pixelComponents[i] + pixelComponents[i+1] + pixelComponents[i+2]) / 3;

        // 将灰度值赋值给RGB通道，保留Alpha通道不变
        pixelComponents[i] = grayVal;     // 红色通道
        pixelComponents[i+1] = grayVal;   // 绿色通道
        pixelComponents[i+2] = grayVal;   // 蓝色通道
        // i+3 是Alpha通道，无需修改
    }
                        
    // 将处理后的图像数据绘制到画布
    context.putImageData(myImageData, 0, 0);
    document.getElementById("srcImgDiv").appendChild(mySrcImg);
}

修正后的HTML代码 #

补充缺失的闭合标签，修正开头的语法错误：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My Image Processing App</title>
    </head>
    
    <body> 
        <h1 id="MyHeader">Image Processing App</h1>
        <p><b>Original Image:</b></p>
        <div id='srcImgDiv'></div>
        
        <p><br></p>
        <p><b>Converted Image:</b></p>
        <canvas id="canvas" width="800" height="800"></canvas>
        <p><br></p> 
    </body>
</html>

关键修改说明 #

• 计算出grayVal灰度值后，将像素的红、绿、蓝三个分量统一设置为该值，即可让像素呈现灰度效果。
• 保留Alpha通道（pixelComponents[i+3]）不变，确保图像透明度不受影响。
• 代码中预留了三种方法的切换方式，只需注释/取消对应代码块即可快速切换灰度化算法。

内容的提问来源于stack exchange，提问作者Josh Smith