在之前的博客中我们就有提过OpenGLES的常见应用范围，其中有一个就是图片的处理。为了保证效率，Android手机中许多美颜相机、图片处理应用，都用到了OpenGLES来处理图片。上一篇博客中，我们利用OpenGLES 显示出了一张图片，并保证图片正常显示，不会被拉伸和压缩。在本篇博客中，我们来了解下利用OpenGLES来处理图片的一些简单方法。

相关原理

本篇博客以简单的图片色彩处理、模糊和放大镜效果为例，来学习OpenGL处理图片的过程。

简单色彩处理

使用过PS的朋友应该都知道，PS利用滤镜可以非常方便的更改图片整体色彩。用过诸如美图秀秀之类的傻瓜式图片处理工具也应该记得，它们可以直接选择将图片的风格改为冷色调、暖色调、复古、黑白等等。这些事怎么实现的呢？
在Android应用中，我们设置文字的颜色，控件的背景色，会在资源文件中进行诸如#FF88269F之类的定义。这个#FF88269F就是我们期望的色彩，我们可以把这个色彩分为4部分，每两位组成一部分，分别表示A（透明通道）、R（红色通道）、G（绿色通道）、B（蓝色通道）。每一部分都由两位十六进制的数表示，也就是取值范围都是0-255，根据各个通道的比率不同，显示出来的最终色彩也就不同了。
在其他的编程语言中，也是和这种方式大同小异。在GLSL中，颜色是用包含四个浮点的向量vec4表示，四个浮点分别表示RGBA四个通道，取值范围为0.0-1.0。我们先读取图片每个像素的色彩值，再对读取到的色彩值进行调整，这样就可以完成对图片的色彩处理了。
我们应该都知道，黑白图片上，每个像素点的RGB三个通道值应该是相等的。知道了这个，将彩色图片处理成黑白图片就非常简单了。我们直接出处像素点的RGB三个通道，相加然后除以3作为处理后每个通道的值就可以得到一个黑白图片了。这是均值的方式是常见黑白图片处理的一种方法。类似的还有权值方法（给予RGB三个通道不同的比例）、只取绿色通道等方式。
与之类似的，冷色调的处理就是单一增加蓝色通道的值，暖色调的处理可以增加红绿通道的值。还有其他复古、浮雕等处理也都差不多。

图片模糊处理

图片模糊处理相对上面的色调处理稍微复杂一点，通常图片模糊处理是采集周边多个点，然后利用这些点的色彩和这个点自身的色彩进行计算，得到一个新的色彩值作为目标色彩。模糊处理有很多算法，类似高斯模糊、径向模糊等等。

放大镜效果

放大镜效果相对模糊处理来说，处理过程也会相对简单一些。我们只需要将制定区域的像素点，都以需要放大的区域中心点为中心，向外延伸其到这个中心的距离即可实现放大效果。具体实现，可参考着色器中vChangeType=4时的操作。

图片处理实例

根据图片色彩处理的原理，我们对图片进行色彩上的处理。本实例中包含了图片转换为黑白图片、冷色调处理、暖色调处理三种，其他诸如此类的简单处理可以依照此方法扩展处理。
首先，我们还是先写着色器程序。顶点着色器可以继续使用上篇博客中的顶点着色器，修改片元着色器为：

precision mediump float;uniform sampler2D vTexture;uniform int vChangeType;uniform vec3 vChangeColor;uniform int vIsHalf;uniform float uXY;      //屏幕宽高比varying vec4 gPosition;varying vec2 aCoordinate;varying vec4 aPos;void modifyColor(vec4 color){    color.r=max(min(color.r,1.0),0.0);    color.g=max(min(color.g,1.0),0.0);    color.b=max(min(color.b,1.0),0.0);    color.a=max(min(color.a,1.0),0.0);}void main(){    vec4 nColor=texture2D(vTexture,aCoordinate);    if(aPos.x>0.0||vIsHalf==0){        if(vChangeType==1){    //黑白图片            float c=nColor.r*vChangeColor.r+nColor.g*vChangeColor.g+nColor.b*vChangeColor.b;            gl_FragColor=vec4(c,c,c,nColor.a);        }else if(vChangeType==2){    //简单色彩处理，冷暖色调、增加亮度、降低亮度等            vec4 deltaColor=nColor+vec4(vChangeColor,0.0);            modifyColor(deltaColor);            gl_FragColor=deltaColor;        }else if(vChangeType==3){    //模糊处理            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.r,aCoordinate.y-vChangeColor.r));            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.r,aCoordinate.y+vChangeColor.r));            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.r,aCoordinate.y-vChangeColor.r));            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.r,aCoordinate.y+vChangeColor.r));            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.g,aCoordinate.y-vChangeColor.g));            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.g,aCoordinate.y+vChangeColor.g));            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.g,aCoordinate.y-vChangeColor.g));            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.g,aCoordinate.y+vChangeColor.g));            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.b,aCoordinate.y-vChangeColor.b));            nColor+=texture2D(vTexture,vec2(aCoordinate.x-vChangeColor.b,aCoordinate.y+vChangeColor.b));            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.b,aCoordinate.y-vChangeColor.b));            nColor+=texture2D(vTexture,vec2(aCoordinate.x+vChangeColor.b,aCoordinate.y+vChangeColor.b));            nColor/=13.0;            gl_FragColor=nColor;        }else if(vChangeType==4){  //放大镜效果            float dis=distance(vec2(gPosition.x,gPosition.y/uXY),vec2(vChangeColor.r,vChangeColor.g));            if(distexture2D(vTexture,vec2(aCoordinate.x/2.0+0.25,aCoordinate.y/2.0+0.25));            }            gl_FragColor=nColor;        }else{            gl_FragColor=nColor;        }    }else{        gl_FragColor=nColor;    }}

为了简便，三个处理使用的是同一个片元着色器，在里面进行了判断。vIsHalf表示是否只处理一半，便于对比原图和处理后的结果。vChangeType为1时，为黑白处理。为2时，作为冷暖色调处理，当然传入其他vChangeColor还可以作为其他的处理。为3时候，作为图片模糊处理。为4时，作为放大镜效果处理。

之后其他的代码和显示贴图代码基本相同，只需要传入vChangeType、vChangeColor依旧vIsHalf的值就可以了。为了方便，可将各种颜色处理封装到枚举类中，如下：

public enum Filter{    NONE(0,new float[]{0.0f,0.0f,0.0f}),    GRAY(1,new float[]{0.299f,0.587f,0.114f}),    COOL(2,new float[]{0.0f,0.0f,0.1f}),    WARM(2,new float[]{0.1f,0.1f,0.0f}),    BLUR(3,new float[]{0.006f,0.004f,0.002f}),    MAGN(4,new float[]{0.0f,0.0f,0.4f});    private int vChangeType;    private float[] data;    Filter(int vChangeType,float[] data){        this.vChangeType=vChangeType;        this.data=data;    }    public int getType(){        return vChangeType;    }    public float[] data(){        return data;    }}

处理结果如下所示：

源码

所有的代码全部在一个项目中，托管在Github上——Android OpenGLES 2.0系列博客的Demo

欢迎转载，转载请保留文章出处。湖广午王的博客[http://blog.csdn.net/junzia/article/details/52902189]

Android(安卓)OpenGLES2.0（九）——利用OpenGL进行图片处理

相关原理

简单色彩处理

图片模糊处理

放大镜效果

图片处理实例

源码

更多相关文章

随机推荐