在RGB模型里当R=G=B时候那么这个颜色就是一个灰度颜色
范围是从0-255的 有四种方式可以实现,当然每个方式实现的效果都是不一样的
原图:![](https://img-blog.csdn.net/20160916131426761)
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);
效果:
![](https://img-blog.csdn.net/20160916131517558)
第二种方式是平均值法则:
意思很简单就是求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);
效果:
![](https://img-blog.csdn.net/20160916132112929)