基于canvas的图片灰度处理

图像灰度  首先需要在彩色照片上进行操作。在canvas上把彩色照片操作为灰度照片，其实就是对其像素点的操作

先贴代码，再做讲解

 ctx.drawImage(imgs, 0, 0,width,height);
            var pixels = ctx.getImageData(0,0,width,height);
            var pixeldata = pixels.data;
            for(var i=0,len = pixeldata.length ;i<len;i+=4){
                var gray =parseInt( pixels.data[i]*0.3 + pixels.data[i+1] *0.59 + pixels.data[i+2]*0.11);
                pixels.data[i] = gray;
                pixels.data[i+1] = gray;
                pixels.data[i+2] = gray;
            }
上面是加权平均值算法，一般由于人眼对不同颜色的敏感度不一样，所以三种颜色值的权重不一样，一般来说绿色最高，红色其次，蓝色最低，最合理的取值分别为

红色30%  绿色 59% 蓝色11%。

ctx.drawImage(imgs, 0, 0,width,height);
            var pixels = ctx.getImageData(0,0,width,height);
            var pixeldata = pixels.data;
            for(var i=0,len = pixeldata.length ;i<len;i+=4){
                var gray =Math.floor(( pixels.data[i] + pixels.data[i+1] + pixels.data[i+2])/3);//平均值灰度算法

                pixels.data[i] = gray;
                pixels.data[i+1] = gray;
                pixels.data[i+2] = gray;
            }
上面是平均值灰度算法，这样处理出来的图片相对柔和一些

ctx.drawImage(imgs, 0, 0,width,height);
            var pixels = ctx.getImageData(0,0,width,height);
            var pixeldata = pixels.data;
            for(var i=0,len = pixeldata.length ;i<len;i+=4){
                var gray =Math.max(pixels.data[i] + pixels.data[i+1] + pixels.data[i+2]);//最大值灰度算法
                pixels.data[i] = gray;
                pixels.data[i+1] = gray;
                pixels.data[i+2] = gray;
            }
上面是最大值灰度算法，这样处理出来的图片相对明亮 。 

下面贴效果图
原图加权灰度图

平均值灰度

最大值灰度