图像处理的滤镜算法大全及js代码实现 总有你要的那一款

本文介绍了多种图像处理滤镜的算法,包括灰度、黑白、反向、去色、单色、高斯模糊、怀旧、熔铸、冰冻、连环画和褐色滤镜。每种滤镜都有详细的处理方法和JavaScript代码实现,适用于简单的图像效果调整。

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

 

 

灰度滤镜

将颜色的RGB设置为相同的值即可使得图片为灰色,一般处理方法有: 1、取三种颜色的平均值 2、取三种颜色的最大值(最小值) 3、加权平均值:0.3R + 0.59G + 0.11*B

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

image.png

 

黑白滤镜

顾名思义,就是图片的颜色只有黑色和白色,可以计算rgb的平均值arg,arg>=100,r=g=b=255,否则均为0

for(var i = 0; i < data.length; i += 4) {
     var avg = (data[i] + data[i+1] + data[i+2]) / 3;
     data[i] = data[i+1] = data[i+2] = avg >= 100 ? 255 : 0;
}

image.png

 

反向滤镜

就是RGB三种颜色分别取255的差值。

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

image.png

 

去色滤镜

rgb三种颜色取三种颜色的最值的平均值。

for(var i = 0; i < data.length; i++) {
   var avg = Math.floor((Math.min(data[i], data[i+1], data[i+2]) + Math.max(data[i], data[i+1], data[i+2])) / 2 );
   data[i] = data[i+1] = data[i+2] = avg;
}