图像灰度 首先需要在彩色照片上进行操作。在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;
}
下面贴效果图平均值灰度
原图加权灰度图
最大值灰度