前言

GPUImage 是iOS下一个开源的基于GPU的图像处理库，提供各种各样的图像处理滤镜，并且支持照相机和摄像机的实时滤镜。GPUImage for Android是它在Android下的实现，同样也是开源的。其中提供了几十多种常见的图片滤镜API，且其机制是基于GPU渲染，处理速度相应也比较快，是一个不错的图片实时处理框架。

基本使用

GPUImage加载图片有两种方式，一种是通过GPUImage类获取结果数据然后用ImageView加载，另一种是使用它的GPUImageView控件来进行展示。

GPUImage滤镜素材

1.通过GPUImage类获取结果数据然后用GLSurfaceView加载

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/surfaceView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

public class GPUImageActivity extends AppCompatActivity {

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gpu_image);

Uri imageUri = Uri.parse("https://upload-images.jianshu.io/upload_images/16311248-4ee6c079e02773d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240");

GPUImage gpuImage = new GPUImage(this);

gpuImage.setGLSurfaceView((GLSurfaceView) findViewById(R.id.surfaceView));

gpuImage.setImage(imageUri); // this loads image on the current thread, should be run in a thread

gpuImage.setFilter(new GPUImageSketchFilter());

}

}

当然，你可能由于项目原因，需要使用ImageView来加载，GPUImage还提供了getBitmapWithFilterApplied接口，可以获取到设置完滤镜之后的Bitmap，你再调用ImageView的setImageBitmap也是可以的：

Uri imageUri = Uri.parse("https://upload-images.jianshu.io/upload_images/16311248-4ee6c079e02773d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240");

GPUImage gpuImage = new GPUImage(this);

gpuImage.setGLSurfaceView((GLSurfaceView) findViewById(R.id.surfaceView));

gpuImage.setImage(imageUri);

gpuImage.setFilter(new GPUImageSketchFilter());

imageView.setImageBitmap(gpuImage.getBitmapWithFilterApplied());

2.通过GPUImageView控件来进行展示

xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/gpu_image_view"

android:layout_width="match_parent"

android:layout_height="match_parent">

public class GPUImageActivity extends AppCompatActivity {

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gpu_image);

Uri imageUri = Uri.parse("https://upload-images.jianshu.io/upload_images/16311248-4ee6c079e02773d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240");

GPUImageView gpuImageView = findViewById(R.id.gpu_image_view);

gpuImageView.setImage(imageUri);

gpuImageView.setFilter(new GPUImageSketchFilter());

}

}

这里添加了一个简单的素描效果，我们看下加了滤镜之后的效果图：

素描效果

效果还不错，如果我们想要换一种滤镜，只要通过setFilter替换具体的滤镜类就可以了，比如说我们调用gpuImageView.setFilter(new GPUImageGrayscaleFilter());换成黑白效果：

黑白滤镜效果图

具体的滤镜类都在jp.co.cyberagent.android.gpuimage.filter这个package下，感兴趣的朋友可以自行查阅。

调整亮度饱和度

刚才举了两个简单的滤镜效果，GPUImage还有一些滤镜是有带参构造方法的，用来方便我们调整效果的百分比，比如说调整饱和度和亮度。

饱和度

GPUImage调整饱和度是通过GPUImageSaturationFilter(float saturation)，saturation代表当前所要设置的饱和度，范围是0~1：

public class GPUImageActivity extends AppCompatActivity implements SeekBar.OnSeekBarChangeListener{

GPUImageView mGpuImageView;

AppCompatSeekBar mSeekBar;

TextView mProgressTv;

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_gpu_image);

mProgressTv = findViewById(R.id.progress_tv);

mSeekBar = findViewById(R.id.seek_bar);

mSeekBar.setMax(100);

mSeekBar.setOnSeekBarChangeListener(this);

Uri imageUri = Uri.parse("https://upload-images.jianshu.io/upload_images/16311248-4ee6c079e02773d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240");

mGpuImageView = findViewById(R.id.gpu_image_view);

mGpuImageView.setImage(imageUri);

}

@Override

public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {

float value = (float)progress / 100f;

mProgressTv.setText("当前饱和度: " + value);

mGpuImageView.setFilter(new GPUImageSaturationFilter(value));

}

@Override

public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override

public void onStopTrackingTouch(SeekBar seekBar) {

}

}

代码很简单，就是根据seekBar的值去更新滤镜的参数，呈现出来的效果：

饱和度调整.gif

亮度

亮度与饱和度用法相似，只需将setFilter替换为GPUImageBrightnessFilter(float brightness)，代码就不贴出来了，直接看效果：

亮度调整.gif

支持的图片类型

可以看到刚才我们的demo是加载了一张网络图，GPUImage还支持其他的加载类型，除了网络资源，还可以加载本地图片也可以加载项目里的资源，比如Bitmap、File、Asset等等，在GPUImage类中可以看到这些接口：

/**

* Sets the image on which the filter should be applied.

*

* @param bitmap the new image

*/

public void setImage(final Bitmap bitmap) {

gpuImage.setImage(bitmap);

}

/**

* Sets the image on which the filter should be applied from a Uri.

*

* @param uri the uri of the new image

*/

public void setImage(final Uri uri) {

gpuImage.setImage(uri);

}

/**

* Sets the image on which the filter should be applied from a File.

*

* @param file the file of the new image

*/

public void setImage(final File file) {

gpuImage.setImage(file);

}

结语

GPUImage 的一些效果基本能满足要求，其他的滤镜效果，小伙伴们可以试试效果如何。其内部也是通过OpenGL实现的，待有空研究一下。

关于作者

GitHub：GitHub-ZJYWidget

CSDN博客：IT_ZJYANG

简 书：Android小Y

在Github上建了一个集合炫酷自定义View的项目，里面有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手给个喜欢， 谢谢~