Android开发之图像处理那点事——滤镜
作者：互联网
在Android开发中，一般对图像的处理就是Bitmap（位图），它包含了图像的全部数据，即点阵和颜色值，点阵就是包含像素点的矩阵，而颜色值就是ARGB，分别代表透明、红色、绿色、蓝色通道，它们共同决定了像素点的颜色，今天我们来讲讲关于改变图像颜色的相关知识点。
先来一张实现效果图：
滤镜演示
颜色矩阵
对于图像来说，每一个像素点都有一个颜色矩阵分量来保存颜色，即下图的RGBA1（矩阵C，1表示颜色的偏移量），而在Android系统中，颜色矩阵是用一个4*5的数字矩阵来表示的（矩阵A，由一维数组构成）。
颜色矩阵
它们的乘积（矩阵R）即为屏幕上显示的图像颜色，这里的RGBA取值应在0~255之间。
颜色矩阵乘积
可能有点懵，没关系，我们来梳理一下：
1、矩阵C，也就是像素点的颜色分量，这个很简单，RGBA1，分别代表红、绿、蓝、透明度和色彩偏移值。
2、矩阵A，它是由一维数组构成的4 * 5的数字矩阵，其中4（行）分别代表RGBA，而5（列）是用来代表决定4（行）RGBA的RGBA和偏移量，有点绕，举个例子，第1行是R，然后这个R所呈现的形式是由abcde来共同决定的，比如红色，它有多种呈现方式，其它3行也是一样，以此类推即可。
根据线性代数的矩阵乘法，我们可以得出:
R’ = a * R + b * G + c * B + d * A + e;
G’ = f * R + g * G + h * B + i * A + j;
B’ = k * R + l * G + m * B + n * A + o;
A’ = p * R + q * G + r * B + s * A + t;
此时我们得到了新的颜色值R’G’B’A’ ，以第1行R为例，如果我们让a=1，让b、c、d、e=0，此时我们可以推导出R’=1R+0G+0B+0A+0=1R，也就是等于原来的R，依次类推，我们可以构造出下图矩阵，这样使得Android的颜色矩阵乘以像素点的颜色矩阵分量还是等于原来的颜色值，这个矩阵也被称为单位矩阵，一般初始化图像的时候，我们会构建它。
单位矩阵
我们上面说了矩阵R是矩阵A和矩阵C的乘积，即为屏幕上所显示的图像颜色，那么如果我们要改变图像的颜色要通过什么方法呢？哈哈，相信你已经知道了，没错，要么改变矩阵A（Android颜色矩阵），要么改变矩阵C（图像颜色矩阵），我们来写个Demo程序，验证一下，我们构建一个界面，由ImageView和20个EditText组成（矩阵AC乘积），如图所示：
初始图片
现在我们改变下第一行（R通道）的最后一个数值，也就是R通道的颜色偏移值，我们改成100，看看图片效果：
改变红色通道偏移值
我们再来改变下第二行（G通道）的最后一个数值，也就是G通道的颜色偏移值，我们改成100，看看图片效果：
改变绿色通道偏移值
和我们预想的是一样的，因为在某颜色通道上偏移了值，那么该图片也就会向某颜色通道偏移颜色。
再来看下直接改变颜色系数，我们改变第三行（G通道）的值，把1修改成2，看看效果：
改变蓝色通道值
上面的效果验证是成功的，图片偏向了蓝色，当然颜色的改变是可以发生叠加的，比如三原色中，我们知道红色和绿色的混合后是黄色，如下图所示：
三原色
我们试着偏移这两个颜色通道，把R和G的颜色通道都偏移了100，看看效果：
image.png
非常的nice，验证成功，改变图像颜色的原理其实就是这个，虽然谷歌已经给我们提供了相关的类库，我们只需要简单的调用api就可以实现效果，不过我觉得学东西应该知其然更应该知其所以然，因为在未来的很多扩展中，这些原理性的东西会显得格外的重要，万丈高楼平地起，好了，现在我们可以来看下相关api了，这篇文章就围绕着一个类来讲——ColorMatrix。
ColorMatrix
关于这个ColorMatrix，其实它就是我们上面分析的那个4 * 5的数字矩阵，只是谷歌帮我们在这个类中封装好了许多简易的操作方法。
我们先来看下刚才那个Demo程序的实现，我们直接看核心代码:
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.set(float[] src);
mImageView.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
首先我们构建出ColorMatrix对象，然后通过set方法把对应的4 * 5数字矩阵（一维数组）传入，根据它我们就可以构建出颜色过滤器ColorMatrixColorFilter，再通过ImageView设置即可，其实重点就在于这个4 * 5数组矩阵的数值，要搭配出好看的颜色滤镜，这个就需要专业做视觉效果和算法的同学提供了，我在Demo程序中整理了一些，文章末尾会给出Demo下载地址。
除了以上简单粗暴的set对应的颜色矩阵，ColorMatrix类中还提供了许多方法，比如可以调整图像的色相、饱和度、灰度等，还是以Demo的形式展开：
调整色相、饱和度、灰度
来看下核心代码：
/**
* 调整图片的色相，饱和度，灰度
*
* @param srcBitmap
* @param rotate
* @param saturation
* @param scale
* @return
*/
public static Bitmap beautyImage(Bitmap srcBitmap, float rotate, float saturation, float scale) {
//调整色相
ColorMatrix rotateMatrix = new ColorMatrix();
rotateMatrix.setRotate(0, rotate);
rotateMatrix.setRotate(1, rotate);
rotateMatrix.setRotate(2, rotate);
//调整色彩饱和度
ColorMatrix saturationMatrix = new ColorMatrix();
saturationMatrix.setSaturation(saturation);
//调整灰度
ColorMatrix scaleMatrix = new ColorMatrix();
scaleMatrix.setScale(scale, scale, scale, 1);
//叠加效果
ColorMatrix colorMatrix = new ColorMatrix();
colorMatrix.postConcat(rotateMatrix);
colorMatrix.postConcat(saturationMatrix);
colorMatrix.postConcat(scaleMatrix);
//创建一个大小相同的空白Bitmap
Bitmap dstBitmap = Bitmap.createBitmap(srcBitmap.getWidth(), srcBitmap.getHeight(), Bitmap.Config.ARGB_8888);
//载入Canvas,Paint
Canvas canvas = new Canvas(dstBitmap);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColorFilter(new ColorMatrixColorFilter(colorMatrix));
//绘图
canvas.drawBitmap(srcBitmap, 0, 0, paint);
return dstBitmap;
}
依葫芦画瓢，我们构建出ColorMatrix对象，这边提供了三个方法：setRotate、saturationMatrix、scaleMatrix分别代表设置图象的色相、灰度、饱和度，来解释下这3个词：
色相：物体传播的颜色。
饱和度：颜色的纯度，从0到100。
灰度：颜色相对的明暗程度。
我们挑其中一个方法来讲：
/**
* Set the rotation on a color axis by the specified values.
* <p>
* <code>axis=0</code> correspond to a rotation around the RED color
* <code>axis=1</code> correspond to a rotation around the GREEN color
* <code>axis=2</code> correspond to a rotation around the BLUE color
* </p>
*/
public void setRotate(int axis, float degrees) {
reset();
double radians = degrees * Math.PI / 180d;
float cosine = (float) Math.cos(radians);
float sine = (float) Math.sin(radians);
switch (axis) {
// Rotation around the red color
case 0:
mArray[6] = mArray[12] = cosine;
mArray[7] = sine;
mArray[11] = -sine;
break;
// Rotation around the green color
case 1:
mArray[0] = mArray[12] = cosine;
mArray[2] = -sine;
mArray[10] = sine;
break;
// Rotation around the blue color
case 2:
mArray[0] = mArray[6] = cosine;
mArray[1] = sine;
mArray[5] = -sine;
break;
default:
throw new RuntimeException();
}
}
上面是setRotate的源码，根据注释我们可以知道第1个参数需要传入0、1、2，分别代表了RGB三种颜色通道，第2个参数是指程度的大小。从源码中我们可以发现，它的原理就是我们文章前面所提到的4 * 5的颜色矩阵，中间涉及到了一些角度的旋转，大概了解一下，把RGB用三维坐标系来表示，单位长度均为1，然后根据设置第1个参数值和第2个参数值来决定围绕哪个点旋转和旋转多少角度，根据三角函数的换算就可以得到对一个的偏移值了，这个我们了解即可，有兴趣的朋友可以自行查阅资料。剩下的2个方法saturationMatrix，scaleMatrix原理都是一样的，都是对颜色矩阵的数值进行操作而已，大家自行查阅，这里就不贴源码了。
附上滑竿传递值的代码（滑竿值的换算公式，这个是比较经典的做法，我也是通过查资料得知，了解即可）：
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
switch (seekBar.getId()) {
case R.id.seekBar_rotate:
mRotate = (mRotateSeekBar.getProgress() - 128f) * 1.0f / 128f * 180;
break;
case R.id.seekBar_saturation:
mSaturation = mSaturationSeekBar.getProgress() / 128f;
break;
case R.id.seekBar_scale:
mScale = mScaleSeekBar.getProgress() / 128f;
break;
}
if (mBitmap != null) {
Bitmap bitmap = BeautyUtil.beautyImage(mBitmap, mRotate, mSaturation, mScale);
mImageView.setImageBitmap(bitmap);
}
}
更改像素点的RGBA
要改变图片的颜色值，这里还有一种更加精确的做法，即对每个像素点进行RGBA的修改，我们以实现底片的效果为例，来看下核心代码：
/**
* 通过更改图片像素点的RGBA值，生成底片效果
* @param scrBitmap
* @return
*/
public static Bitmap beautyImage(Bitmap scrBitmap) {
int width = scrBitmap.getWidth();
int height = scrBitmap.getHeight();
int count = width * height;
int[] oldPixels = new int[count];
int[] newPixels = new int[count];
scrBitmap.getPixels(oldPixels, 0, width, 0, 0, width, height);
for (int i = 0; i < oldPixels.length; i++) {
int pixel = oldPixels[i];
int r = Color.red(pixel);
int g = Color.green(pixel);
int b = Color.blue(pixel);
r = 255 - r;
g = 255 - g;
b = 255 - b;
if (r > 255) {
r = 255;
}
if (g > 255) {
g = 255;
}
if (b > 255) {
b = 255;
}
if (r < 0) {
r = 0;
}
if (g < 0) {
g = 0;
}
if (b < 0) {
b = 0;
}
newPixels[i] = Color.rgb(r, g, b);
}
Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
bitmap.setPixels(newPixels, 0, width, 0, 0, width, height);
return bitmap;
}
我们需要知道生成底片的公式（网上有很多成熟的效果公式，有兴趣的朋友可以自行搜索下，这边只是举例，重点讲原理）：
r=255-r;
g=255-g;
b=255-b;
首先我们调用Bitmap的getPixels方法，把像素数据存放在int数组里，然后根据Color.red，Color.green，Color.blue方法取出这些像素点的RGB值，然后进行公式的换算和边界值处理，再调用setPixels设置回创建的新的Bitmap，这样就完成了我们的底片效果了，来看下效果图：
底片效果图
补充
到这里文章就结束了，以上的效果因为只是Demo演示，有些细节是没有做处理的，在实际开发中，大家还是内存相关的问题，这边最后再说几句：
1、Bitmap的压缩加载以及回收要注意场合，不是所有时候都需要加载原图的，请根据业务场景合理规划。
2、ColorMatrix只是简单的对RGBA通道做了值的调整，如果想实现更加精细化的效果，还是需要配合底层C++来实现会更好。
3、市面上的一些美颜APP，其实并不是用如上方法来实现的，滤镜是个很复杂的东西，为了更好的渲染性能，达到实时美颜的效果，一半我们会采用GPU（OpenGL）来绘制，GPU可以达到像素点近毫秒级的并发处理，后续我也会写一些相关的文章。
最后来张最近被玩坏的王校长，IG牛逼~
IG牛逼
源码下载:
这里附上源码地址（欢迎Star，欢迎Fork）：BeautyImageDemo
标签：颜色,ColorMatrix,int,矩阵,Bitmap,滤镜,图像处理,Android,255 来源： https://www.cnblogs.com/Free-Thinker/p/10895353.html