美狐滤镜sdk技术（一）：所谓的滤镜算法如何实现

滤镜sdk适用的场景有很多，比较常见的有直播、短视频、社交软件、美颜相机等，而随着时代的不断变化，现代人对照片视频的色彩和质感方面的要求也越来越高。本文以滤镜算法为主要内容来简单分享下。
灰度滤镜
常见的彩色图片有RGB_8888、RGB_565、RGB_4444几种，每一个像素的颜色值由红、绿、蓝三种值混合而成，红绿蓝的取值也有很多种，而像素的颜色值也有很多颜色值，这可以看作彩色图片的原理。相反的，灰度图片只有356中颜色，通常处理过程中是将图片颜色值的RGB三个通道值设定一样的，这样一来原本是256x256x256种颜色就只剩下256种，而256中颜色值就相当于是丢失了图片的彩色信息，只剩下了亮度值，从人类的视觉上看就是灰色。
在美狐滤镜sdk中，灰度处理通常有三种算法：
1.最大值——即新的颜色值R=G=B=Max（R,G,B），该方法处理后的图片或视频亮度较高。
2.平均值——即新的颜色值R=G=B=(R+G+B)/3,处理后的图片较柔和。
3.加权平均值——即新的颜色值R=G=B=(RxWr+GxWg+BxWb)，由于人眼对不同颜色的敏感度不同，所以三种颜色值的权重也就不同。通常是绿色最高、红色第二、蓝色最低。
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;

}
（本段代码仅供参考，不作商用）
黑白滤镜
其实黑白和灰度还是有一定区别的，灰度有256种颜色，而黑白是只保留黑白两种颜色。
可以计算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之差后的值作为当前点的RGB值，则R=255-R;G=255-G;B=255-B。
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值减去相邻点的RGB值并加上128作为新的RGB 值。因为图片中相邻点的颜色值是比较接近的，所以在做算法处理之后只有颜色的边沿区域，即相邻颜色差异较大的部分结果会稍微明显一些，其他平滑区域值一般在128左右，从而实现浮雕效果。
int preColor = 0;
int prepreColor = 0;
preColor = cbuf[0];

int i = 0;
int j = 0;
for (i = 0; i < width; i++)
{

for (j = 0; j < height; j++)
{
    int curr_color = cbuf[j * width + i];
    int r = red(curr_color) - red(prepreColor) + 128;
    int g = green(curr_color) - red(prepreColor) + 128;
    int b = green(curr_color) - blue(prepreColor) + 128;
    int a = alpha(curr_color);

    int newcolor = (int)(r * 0.3 + g * 0.59 + b * 0.11);

    int modif_color = ARGB(a, newcolor, newcolor, newcolor);
    rbuf[j * width + i] = modif_color;
    prepreColor = preColor;
    preColor = curr_color;
}

}
（本段代码仅供参考，不作商用）
褐色滤镜
对颜色进行变换的滤镜，在此就不多作赘述。采用公式：R=Rx0.393+Gx0.7 69+Bx0.189;G=Rx0.349+Gx0.686+Bx0.168;B=Rx0.272+Gx0.534+Bx0.131。
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;

}
（本段代码仅供参考，不作商用）
由此可见，美狐滤镜sdk在算法实现方面是存在一定技巧的，但是站在个人开发的角度来看，仍然具备较大困难，并不建议个人研发。
声明：以上内容均为作者本人原创，转载需注明作者及原文链接，欢迎转载分享。