基于canvas的图片灰度处理

时间:2021-10-31 08:21:09

图像灰度  首先需要在彩色照片上进行操作。在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;
}
上面是最大值灰度算法,这样处理出来的图片相对明亮 。
下面贴效果图
原图基于canvas的图片灰度处理加权灰度图基于canvas的图片灰度处理

平均值灰度 基于canvas的图片灰度处理

最大值灰度基于canvas的图片灰度处理