【图像处理】中的“滤镜算法”：灰度、黑白、反向、去色、单色、高斯模糊、怀旧、连环画

深藏阁楼爱情的钟 2021-12-09 20:29 196阅读 0赞

**目录**

灰度滤镜

黑白滤镜

反向滤镜

去色滤镜

单色滤镜

高斯模糊滤镜

怀旧滤镜

熔铸滤镜

冰冻滤镜

连环画滤镜

褐色滤镜

--------------------

# 灰度滤镜 #

将颜色的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;
    }

#       黑白滤镜 #

顾名思义，就是图片的颜色只有黑色和白色，可以计算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;
    }

#       反向滤镜 #

就是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];
    }

#       去色滤镜 #

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;
    }

#       单色滤镜 #

就是只保留一种颜色，其他颜色设为0

for(var i = 0; i < canvas.height * canvas.width; i++) {
        data[i*4 + 2] = 0;
        data[i*4 + 1] = 0;
    }

#    高斯模糊滤镜 #

高斯模糊的原理就是根据正态分布使得每个像素点周围的像素点的权重不一致，将各个权重（各个权重值和为1）与对应的色值相乘，所得结果求和为中心像素点新的色值。我们需要了解的高斯模糊的公式：

#       怀旧滤镜 #

for(var i = 0; i < imgData.height * imgData.width; i++) {
        var r = imgData.data[i*4],
            g = imgData.data[i*4+1],
            b = imgData.data[i*4+2];
     
        var newR = (0.393 * r + 0.769 * g + 0.189 * b);
        var newG = (0.349 * r + 0.686 * g + 0.168 * b);
        var newB = (0.272 * r + 0.534 * g + 0.131 * b);
        var rgbArr = [newR, newG, newB].map((e) => {
            return e < 0 ? 0 : e > 255 ? 255 : e;
        });
        [imgData.data[i*4], imgData.data[i*4+1], imgData.data[i*4+2]] = rgbArr;
    }

#       熔铸滤镜 #

公式： r = r128/(g+b +1); g = g128/(r+b +1); b = b\*128/(g+r +1);

for(var i = 0; i < imgData.height * imgData.width; i++) {
        var r = imgData.data[i*4],
            g = imgData.data[i*4+1],
            b = imgData.data[i*4+2];
     
        var newR = r * 128 / (g + b + 1);
        var newG = g * 128 / (r + b + 1);
        var newB = b * 128 / (g + r + 1);
        var rgbArr = [newR, newG, newB].map((e) => {
            return e < 0 ? 0 : e > 255 ? 255 : e;
        });
        [imgData.data[i*4], imgData.data[i*4+1], imgData.data[i*4+2]] = rgbArr;
    }

#       冰冻滤镜 #

公式： r = (r-g-b)\*3/2; g = (g-r-b)\*3/2; b = (b-g-r)\*3/2;

for(var i = 0; i < imgData.height * imgData.width; i++) {
        var r = imgData.data[i*4],
            g = imgData.data[i*4+1],
            b = imgData.data[i*4+2];
     
        var newR = (r - g -b) * 3 /2;
        var newG = (g - r -b) * 3 /2;
        var newB = (b - g -r) * 3 /2;
        var rgbArr = [newR, newG, newB].map((e) => {
            return e < 0 ? 0 : e > 255 ? 255 : e;
        });
        [imgData.data[i*4], imgData.data[i*4+1], imgData.data[i*4+2]] = rgbArr;
    }

#       连环画滤镜 #

公式： R = |g – b + g + r| \* r / 256

G = |b – g + b + r| \* r / 256;

B = |b – g + b + r| \* g / 256;

for (var i = 0; i < imgData.height * imgData.width; i++) {
        var r = imgData.data[i * 4],
            g = imgData.data[i * 4 + 1],
            b = imgData.data[i * 4 + 2];
     
        var newR = r * 0.393 + g * 0.769 + b * 0.189;
        var newG = r * 0.349 + g * 0.686 + b * 0.168;
        var newB =  r * 0.272 + g * 0.534 + b * 0.131;
        var rgbArr = [newR, newG, newB];
        [imgData.data[i * 4], imgData.data[i * 4 + 1], imgData.data[i * 4 + 2]] = rgbArr;
    }

#       褐色滤镜 #

公式： r = r \* 0.393 + g \* 0.769 + b \* 0.189; g = r \* 0.349 + g \* 0.686 + b \* 0.168; b = r \* 0.272 + g \* 0.534 + b \* 0.131;

[https://blog.csdn.net/weixin\_34198881/article/details/88039549][https_blog.csdn.net_weixin_34198881_article_details_88039549]

[https_blog.csdn.net_weixin_34198881_article_details_88039549]: https://blog.csdn.net/weixin_34198881/article/details/88039549