在 Egret Engine 3.1.0 开始提供 WebGL 渲染的颜色矩阵滤镜和模糊滤镜。颜色矩阵滤镜在游戏中常用来在战斗中将“怪物”“灰掉”等功能。模糊滤镜可以实现显示对象的模糊效果。

需要注意的是 Web 下的 Canvas 模式和 Native 下暂不支持滤镜功能。

通过显示对象的 filters 属性设置显示对象关联的每个滤镜对象的索引数组。下面使用 Bitmap 为例，其他显示对象也支持 filters 属性。


颜色矩阵滤镜

ColorMatrixFilter–颜色矩阵滤镜(egret.ColorMatrixFilter) 在颗粒等级上提供给你更好的控制显示对象的颜色转换。ColorMatrixFilter为 4行5列的多维矩阵(20个元素的数组)。下图为等效的矩阵。



使用颜色转换滤镜

在 Egret 中使用颜色转换矩阵比较简单，先看一段实现图片变“灰”效果的代码，然后详细介绍。首先是一张准备好的图片：



然后我们通过下面颜色转换矩阵代码添加一个变“灰”的效果:
var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);
//颜色矩阵数组
var colorMatrix = [
    0.3,0.6,0,0,0,
    0.3,0.6,0,0,0,
    0.3,0.6,0,0,0,
    0,0,0,1,0
];

var colorFlilter = new egret.ColorMatrixFilter(colorMatrix);
hero.filters = [colorFlilter];


效果如下：



首先我们新建了一个显示对象，然后新建了一个颜色转换矩阵 ColorMatrixFilter,并通过显示对象的 filters 属性来设置滤镜。显示对象的 filters 属性包含当前与显示对象关联的每个滤镜对象的索引数组。

在 Egret 中使用滤镜功能还是很方便的，实现效果的关键主要是颜色转换矩阵的设置。上面我们将每个颜色通道都乘相同的系数来实现灰度效果。

通过 ColorMatrixFilter 的 matrix 属性可以设置颜色矩阵。需要注意的是不能直接通过 colorFlilter.matrix[4]
 = 100; 这样的方式直接修改颜色矩阵。只能通过获得数组的引用然后修改,最后重置重置矩阵：

//获得数组。
var test = colorFlilter.matrix;
//修改数组中的值。
test[4] = 100;  
//重置矩阵。
colorFlilter.matrix = test;


颜色矩阵

在上面例子中我们实现了灰度图的效果，再来看一下颜色矩阵的含义：



实际的颜色值由下面的公式决定：
redResult   = (a[0] * srcR)  + (a[1] * srcG)  + (a[2] * srcB)  + (a[3] * srcA)  + a[4];
greenResult = (a[5] * srcR)  + (a[6] * srcG)  + (a[7] * srcB)  + (a[8] * srcA)  + a[9];
blueResult  = (a[10] * srcR) + (a[11] * srcG) + (a[12] * srcB) + (a[13] * srcA) + a[14];
alphaResult = (a[15] * srcR) + (a[16] * srcG) + (a[17] * srcB) + (a[18] * srcA) + a[19];


公式中 srcR、srcG、srcB、srcA 表示原始显示对象的像素值, a 即我们设置的颜色矩阵的数组。我们得到的红绿蓝和alpha通道实际由颜色矩阵和原始图片的像素值同时决定。颜色矩阵中的 Off 可以直接设置偏移量加上相应的 R G B A 的值的乘积即为最终的颜色值。所以与原来完全相同的矩阵转换应该是下面这样的：
var colorMatrix = [
    1,0,0,0,0,
    0,1,0,0,0,
    0,0,1,0,0,
    0,0,0,1,0
];


设置红色偏移量

在颜色矩阵中直接设置每一行中最后一个值即可设置偏移量，我们直接设置一下红色通道的偏移量，结果整张图片将变红。
var colorMatrix = [
    1,0,0,0,100,
    0,1,0,0,0,
    0,0,1,0,0,
    0,0,0,1,0
];


修改代码中的颜色矩阵数组，编译运行得到如下效果图：



需要注意的 R G B 通道对应的偏移量的值应该为 -255 ~ 255，Alpha 通道对应的偏移量取值范围为 0 ~ 1.应避免传入除数字外其他类型的值，比如字符串等。


绿色加倍

如果想使绿色通道加倍,colorMatrix[6] 加倍即可：
var colorMatrix = [
    1,0,0,0,0,
    0,2,0,0,0,
    0,0,1,0,0,
    0,0,0,1,0
];




红色决定蓝色值

如果你要使结果图像中的蓝色与原图的红色数量相等，将colorMatrix[10]设为1， colorMatrix[12]设为0 ,即结果的蓝色值完全由原始的红色值决定：
var colorMatrix = [
    1,0,0,0,0,
    0,1,0,0,0,
    1,0,0,0,0,
    0,0,0,1,0
];




增加亮度

增加亮度的最简单途径是给每个颜色值添加相同的偏移量。
var colorMatrix = [
    1,0,0,0,100,
    0,1,0,0,100,
    0,0,1,0,100,
    0,0,0,1,0
];




通过”颜色矩阵滤镜”你可以完成除了亮度和灰度之外复杂的颜色调整，如调整对比度，饱和度和色相等。

模糊滤镜

在 Egret 中使用模糊滤镜也比较简单，通过 BlurFilter 类来设置模糊滤镜。
var hero:egret.Bitmap = new egret.Bitmap();
hero.texture = RES.getRes("hero_png");
this.addChild(hero);

var blurFliter = new egret.BlurFilter( 1 , 1);
hero.filters = [blurFliter];


和颜色转换矩阵类似，实例化一个 BlurFilter 并将其保存到显示对象的 filters 属性中即可。其中示例化 BlurFilter 有两个参数，即为 x 、y 方向的模糊度。

值越大效果越模糊。



需要注意的是模糊滤镜对性能的消耗比较大，应谨慎使用。普通显示对象可以开启 cacheAsBitmap 提高一些性能。

显示对象的 filters 属性可以保存多个滤镜效果，比如同时使用hero.filters = [blurFliter,colorFlilter]; 模糊和颜色矩阵滤镜效果。多个效果同时生效。

图像滤镜算法——水彩滤镜、漫画滤镜
要求
①编程实现水彩画滤镜、漫画滤镜，算法严格按照下文所示方式实现，处理效果如上所示。

②显示处理前后的图像。

③还包含以下功能：可以设置算法参数，保存处理后的图像。
水彩画滤镜算法流程
漫画滤镜算法流程
#include<opencv2/core/core.hpp>
#include<opencv2/highgui/highgui.hpp>
#include <opencv2\imgproc\imgproc.hpp>
#include<iostream>
using namespace std;
using namespace cv;
void shuicai(Mat &src, Mat &dst,int s,int redius)
{
 float r = 0, b = 0, g = 0;
 float q = 0;
 Mat tmp;
 src.copyTo(tmp);
 unsigned char**Q = new unsigned char*[src.rows];
 for (int i = 0; i < src.rows; i++) {
  Q[i] = new unsigned char[src.cols];
  for (int j = 0; j < src.cols; j++) {
   r = src.at<Vec3b>(i, j)[0];
   g = src.at<Vec3b>(i, j)[1];
   b = src.at<Vec3b>(i, j)[2];
   q = (r + b + g)*s / 255;
   Q[i][j] = cvRound(q);
   
  }
 }
 Vec3b *C = new Vec3b[3*s+1];
 unsigned char *hist = new unsigned char[3*s+1];
 for (int i = redius; i <src.rows - redius;i++)
 {
  for (int j = redius; j <src.cols-redius;j++)
  {
   for (int z = 0; z < 3 * s+1; z++) 
   {
    hist[z] = 0;
    C[z] = 0;
   }
   for (int m = -redius; m <=redius; m++) 
   {
    for (int n = -redius; n <=redius; n++)
    {
     hist[Q[i + m][j + n]]++;
     C[Q[i + m][j + n]] = src.at<Vec3b>(i + m,j + n);
    }
   }
   int max = hist[0]; int h1 = 0;
   for (int h = 1; h < 3*s+1; h++) 
   {
    if (hist[h] > max) 
    {
     max = hist[h];
     h1 = h;
    }
   }
   tmp.at<Vec3b>(i, j) = C[h1];
  }
 }
 tmp.copyTo(dst);
 delete  hist;
 delete []C;
 for (int i = 0; i < src.rows; i++) {
  delete Q[i];
 }
 delete Q;
}
void manhua(Mat &src, Mat &dst, int m_value, int redius) {
 Mat dst1;
 shuicai(src, dst1, 10, redius);
 Mat gray, gray_x, gray_y, abs_grad_x, abs_grad_y, pedge,pedge1;
 blur(src, src, Size(3, 3));
 cvtColor(src, gray, cv::COLOR_RGB2GRAY);
 Sobel(gray, gray_x, CV_16S, 1, 0, 3);
 convertScaleAbs(gray_x, abs_grad_x);
 Sobel(gray, gray_y, CV_16S, 0, 1, 3);
 convertScaleAbs(gray_y, abs_grad_y);
 addWeighted(abs_grad_x, 0.5, abs_grad_y, 0.5, 0, pedge);
 int size = pedge.rows*pedge.cols;
 for (int i = 0; i < size;i++) {
  pedge.data[i] = MIN(pedge.data[i] + m_value, 255);
 }
 Mat rgb[3];
 split(dst1, rgb);
 Mat y[3];
 y[0] = Mat::zeros(Size(src.cols, src.rows), CV_8UC1);
 y[1] = Mat::zeros(Size(src.cols, src.rows), CV_8UC1);
 y[2] = Mat::zeros(Size(src.cols, src.rows), CV_8UC1);
 for (int i = 0; i < rgb[2].rows; i++) {
  for (int j = 0; j < rgb[2].cols; j++)
  {
   int x[3];
   x[0] = rgb[0].at<uchar>(i, j);
   x[1] = rgb[1].at<uchar>(i, j);
   x[2] = rgb[2].at<uchar>(i, j);
   y[0].at<uchar>(i, j) = ((255 - pedge.at<uchar>(i, j)) * x[0] / 255);
   y[1].at<uchar>(i, j) = ((255 - pedge.at<uchar>(i, j)) * x[1] / 255);
   y[2].at<uchar>(i, j) = ((255 - pedge.at<uchar>(i, j)) * x[2] / 255);
  }
 }
 std::vector<Mat>channels;
 channels.push_back(y[0]);
 channels.push_back(y[1]);
 channels.push_back(y[2]);
 merge(channels, dst);
}
int main(int argc, char ** argv)
{
 Mat src[1], dst[2];
 //参数
 int redius;
 int s;
 int m_value;
 cout << "请输入redius,s,m_value" << endl;
 cin >> redius;
 cin >> s;
 cin >> m_value;
 //读
 src[0] = imread(argv[1], CV_LOAD_IMAGE_COLOR);//原图
 //处理
 shuicai(src[0], dst[0],s,redius);
 manhua(src[0], dst[1],m_value,redius);
 //显示
 imshow("原图", src[0]);
 imshow("水彩画", dst[0]);
 imshow("漫画", dst[1]);
 //保存
 imwrite("水彩画.jpg", dst[0]);
 imwrite("漫画.jpg", dst[1]);
 waitKey(0);
 return 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）与对应的色值相乘，所得结果求和为中心像素点新的色值。我们需要了解的高斯模糊的公式：


function gaussBlur(imgData, radius, sigma) {
    var pixes = imgData.data,
        height = imgData.height,
        width = imgData.width,
        radius = radius || 5;
        sigma = sigma || radius / 3;
    
    var gaussEdge = radius * 2 + 1;

    var gaussMatrix = [],
        gaussSum = 0,
        a = 1 / (2 * sigma * sigma * Math.PI),
        b = -a * Math.PI;
    
    for(var i = -radius; i <= radius; i++) {
        for(var j = -radius; j <= radius; j++) {
            var gxy = a * Math.exp((i * i + j * j) * b);
            gaussMatrix.push(gxy);
            gaussSum += gxy;
        }
    }
    var gaussNum = (radius + 1) * (radius + 1);
    for(var i = 0; i < gaussNum; i++) {
        gaussMatrix[i] /= gaussSum;
    }

    for(var x = 0; x < width; x++) {
        for(var y = 0; y < height; y++) {
            var r = g = b = 0;
            for(var i = -radius; i<=radius; i++) {
                var m = handleEdge(i, x, width);
                for(var j = -radius; j <= radius; j++) {
                    var mm = handleEdge(j, y, height);
                    var currentPixId = (mm * width + m) * 4;
                    var jj = j + radius;
                    var ii = i + radius;
                    r += pixes[currentPixId] * gaussMatrix[jj * gaussEdge + ii];
                    g += pixes[currentPixId + 1] * gaussMatrix[jj * gaussEdge + ii];
                    b += pixes[currentPixId + 2] * gaussMatrix[jj * gaussEdge + ii];
                }
            }
            var pixId = (y * width + x) * 4;

            pixes[pixId] = ~~r;
            pixes[pixId + 1] = ~~g;
            pixes[pixId + 2] = ~~b;
        }
    }
    imgData.data = pixes;
    return imgData;
}

function handleEdge(i, x, w) {
    var m = x + i;
    if(m < 0) {
        m = -m;
    } else if(m >= w) {
        m = w + i -x;
    }
    return m;
}



怀旧滤镜

怀旧滤镜公式


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 = Math.abs(g - b + g + r) * r / 256;
    var newG = Math.abs(b -g + b + r) * r / 256;
    var newB =  Math.abs(b -g + b + r) * g / 256;
    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;
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;
}



红包+折扣，阿里云上云大礼包！

https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=5wzgtzow

【全民云计算】 云主机低至4折

https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=5wzgtzow

【阿里云新用户】 云通信专享8折

https://www.aliyun.com/acts/alicomcloud/new-discount?userCode=5wzgtzow

【商标注册服务】 低至680

https://tm.aliyun.com/?userCode=5wzgtzow

熔铸滤镜

与怀旧滤镜类似，通过对图像rgb三个分量的调整变化，可以得到熔铸滤镜的效果。以下是调整的公式：

图 1：熔铸滤镜公式

图 2：原图

代码实现

// casting-filter.cpp : 熔铸滤镜
// @mango

#include<iostream>
#include<opencv2/opencv.hpp>



int main()
{

    cv::Mat img = cv::imread("fruit.jpg");

    for (size_t i = 0; i < img.rows; i++)
    {
        for (size_t j = 0; j < img.cols; j++)
        {
            img.at<cv::Vec3b>(i, j)[0] = cv::saturate_cast<uchar>(128 * img.at<cv::Vec3b>(i, j)[0] /( img.at<cv::Vec3b>(i, j)[1] + img.at<cv::Vec3b>(i, j)[2] + 1));// blue
            img.at<cv::Vec3b>(i, j)[1] = cv::saturate_cast<uchar>(128 * img.at<cv::Vec3b>(i, j)[1] /( img.at<cv::Vec3b>(i, j)[0] + img.at<cv::Vec3b>(i, j)[2] + 1));// green
            img.at<cv::Vec3b>(i, j)[2] = cv::saturate_cast<uchar>(128 * img.at<cv::Vec3b>(i, j)[2] /( img.at<cv::Vec3b>(i, j)[0] + img.at<cv::Vec3b>(i, j)[1] + 1));// red
        }
    }
    cv::imshow("熔铸滤镜", img);

    cv::waitKey(0);
    return 0;
}

滤镜效果

图 3：熔铸滤镜效果

本文由芒果浩明发布，转载请注明来源。

本文链接：https://mangoroom.cn/opencv/casting-filter.html