HTML5 canvas标签－3 简单灰度化的实现

在RGB模型里当R=G=B时候那么这个颜色就是一个灰度颜色

范围是从0-255的 有四种方式可以实现，当然每个方式实现的效果都是不一样的

原图：

1 加权平均方法 就是利用灰度公式 根据人眼对色彩敏感程度进行处理的一种方式

约等于f(i,j)=0.30R(i,j)+0.59G(i,j)+0.11B(i,j))

代码如下

        for (var i=0;i<canvas.width;i++){
            for (var j=0;j<canvas.height;j++){
                var currentPixel = 4*canvas.width*j + 4* i,
                    r = data.data[currentPixel],
                    g = data.data[currentPixel+1],
                    b = data.data[currentPixel+2],
                    gray = 0.3*r+0.59*g+0.11*b;
                data.data[currentPixel] = gray;
                data.data[currentPixel+1] = gray;
                data.data[currentPixel+2] = gray;
            }
        }
        ctx.putImageData(data,0,0);

效果：

第二种方式是平均值法则：

意思很简单就是求R，G，B三个值的平均值

代码：

        for (var i=0;i<canvas.width;i++){
            for (var j=0;j<canvas.height;j++){
                var currentPixel = 4*canvas.width*j + 4* i;
                var num = Math.floor((data.data[currentPixel]+data.data[currentPixel+1]+data.data[currentPixel+2])/3)
                data.data[currentPixel] = num;
                data.data[currentPixel+1] = num;
                data.data[currentPixel+2] = num;
            }
        }
        ctx.putImageData(data,0,0);

效果：

第三种是最大值法：

        for (var i=0;i<canvas.width;i++){
            for (var j=0;j<canvas.height;j++){
                var currentPixel = 4*canvas.width*j + 4* i;
                var num = Math.max(data.data[currentPixel],data.data[currentPixel+1],data.data[currentPixel+2])
                data.data[currentPixel] = num;
                data.data[currentPixel+1] = num;
                data.data[currentPixel+2] = num;
            }
        }
        ctx.putImageData(data,0,0);

效果：