基于canvas的图片灰度处理
2017-06-07 14:14
411 查看
图像灰度 首先需要在彩色照片上进行操作。在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图像处理的图片 灰色图像
- 基于mfc数字图像处理的小软件pdd-转换图片成RGB通道,反色,黑白,灰度图片
- 基于Python中的matplotlib图片的灰度处理
- 利用canvas对图片进行灰度色处理,图片只有一半变成灰度色
- 基于canvas图像处理的图片展示demo
- alloy团队基于canvas的图片处理插件AlloyImage
- Canvas图片灰度等相关处理
- 基于canvas图像处理的图片展示demo
- 基于canvas的图片反色处理
- [H5-Compress-Image]利用canvas实现 javascript 图片压缩处理_基于requirejs模块化的代码实现
- EvaThumber : 基于URL的图片处理库 (可实现缩略图 | 二维码 | 水印 | 面部识别等)
- 基于Visual C#2010开发Windows7应用 多点触摸图片处理应用程序(2)-使用多点触摸操作处理图片 .
- canvas 将彩色图片变成灰度图片
- Android: 利用Bimap,canvas处理图片(画直线)
- IOS开发笔记 - 基于SDWebImage的网络图片加载处理
- ImageCache Actions - 基于 ImageCache 的图片处理方法集,支持图...
- WPF 图片灰度处理
- canvas的处理图片功能
- WPF 图片灰度处理
- 利用HTML5中Canvas处理并存储图片