前言

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://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控件来进行展示

<?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://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~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手给个喜欢， 谢谢~

关注Android 技术小栈，更多精彩原创