基于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; 
}

上面是最大值灰度算法，这样处理出来的图片相对明亮 。

 

以下是对应的效果图

平均值灰度

 

最大值灰度