前言
GPUImage 是iOS下一个开源的基于GPU的图像处理库，提供各种各样的图像处理滤镜，并且支持照相机和摄像机的实时滤镜。GPUImage for Android是它在Android下的实现，同样也是开源的。其中提供了几十多种常见的图片滤镜API，且其机制是基于GPU渲染，处理速度相应也比较快，是一个不错的图片实时处理框架。
GitHub传送门：GPUImage for Android
基本使用
GPUImage加载图片有两种方式，一种是通过GPUImage类获取结果数据然后用ImageView加载，另一种是使用它的GPUImageView控件来进行展示。
GPUImage滤镜素材
1.通过GPUImage类获取结果数据然后用GLSurfaceView加载
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.opengl.GLSurfaceView
android:id="@+id/surfaceView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
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://img.haomeiwen.com/i16311248/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://img.haomeiwen.com/i16311248/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控件来进行展示
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<jp.co.cyberagent.android.gpuimage.GPUImageView
android:id="@+id/gpu_image_view"
android:layout_width="match_parent"
android:layout_height="match_parent">
</jp.co.cyberagent.android.gpuimage.GPUImageView>
</android.support.constraint.ConstraintLayout>
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://img.haomeiwen.com/i16311248/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://img.haomeiwen.com/i16311248/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~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手给个喜欢， 谢谢~
关注Android 技术小栈，更多精彩原创
网友评论