canvas实现图像灰度

最新推荐文章于 2024-03-13 15:23:55 发布

xiaoli2013a

最新推荐文章于 2024-03-13 15:23:55 发布

阅读量440

点赞数

文章标签： canvas h5 图像处理

本文链接：https://blog.csdn.net/u011539729/article/details/103069613

版权

这篇博客介绍了如何使用HTML5的canvas实现图像的灰度处理。通过按权的整数法(R0.3 + G0.59 + B*0.11)转换每个像素的RGB值，将彩色图像变为灰度图像。步骤包括获取图像像素信息，遍历并处理每个像素，再将处理结果放回画布。

摘要由CSDN通过智能技术生成

还是这个美女,长这样
在这里插入图片描述

然后对这图进行一个灰度操作
在这里插入图片描述

啊,感觉整个世界失去了色彩!但不要紧,要紧的是怎么丢掉色彩变成灰度图像呢?实现灰度的算法有好几种,如:

1.平均数法:(R + G + B)/3

2.按权的整数法:(R0.3 + G0.59 + B*0.11)

3.移位方法:(R76+G151+B*28)>>8

…

这里我们选用NO.2,按权的整数法,它基本可以满足我们的视觉需要了,接着看下怎么实现

1.获取画布上图像的像素信息

2.遍历每一个像素

3.将每个像素的各个通道的数值变成按权的整数法所得的值

4.把处理后的像素信息放回画布

然后

 function Filter(context){
   
    this.context = context;
  }
  Filter.prototype.constructor = Filter;
  Filter.prototype

关注