canvas像素级操作实现滤镜之反色滤镜、黑白滤镜

最新推荐文章于 2025-06-10 09:20:25 发布

mydoodle

最新推荐文章于 2025-06-10 09:20:25 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏：图像处理文章标签：滤镜

本文链接：https://blog.youkuaiyun.com/u013678963/article/details/19346897

图像处理专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了黑白滤镜和反色滤镜的工作原理，并提供了对应的代码实现，帮助开发者理解图像处理的基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

反色滤镜：

原理：从255中减去每个像素的红、绿、蓝分量值，再将差值赋值回去实现反转

代码：

	//反色滤镜
	function negative_Filter(data) {

		for (var i = 0; i < data.length - 4; i += 4) {
			data[i] = 255 - data[i];
			data[i + 1] = 255 - data[i + 1];
			data[i + 2] = 255 - data[i + 2];
		}
		return data;
	}

黑白滤镜：

原理：计算出每个像素的红、绿、蓝分量值的平局值，然后将三个分量值都设置为该平均值

代码实现：

	//黑白滤镜
	function BAW_Filter(data) {

		for (var i = 0; i < data.length - 4; i += 4) {
			var tmp = (data[i] + data[i + 1] + data[i + 2]) / 3;

			data[i] = tmp;
			data[i + 1] = tmp;
			data[i + 2] = tmp;
		}
		return data;
	}