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

来源：互联网发布：国家旅游局大数据编辑：程序博客网时间：2024/05/01 12:35

在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);

效果：

0 0