一步步带你实现Android图片处理库gpuimage的配置、使用、封装、多效果集于一身（eg:灰度滤镜+鱼眼效果）

官网：https://github.com/cats-oss/android-gpuimage

以下以灰色滤镜、鱼眼效果（变形，看腰和海面）、饱和度 为例，进行讲解，效果图如下：

图一：原图，刚进去的界面，没有任何操作，可以优化黑色，一开始隐藏，进行图片处理时再显示；

图二：灰色滤镜  ；   图三：鱼眼效果  ；    图四：灰色+鱼眼

第二排：饱和度，注意看进度条，图片可以随进度条变化（不会传GIF）

                                                                                                                                      

 

                                                             

 

步骤： 

注：我的项目是AndroidX的，视图绑定使用了dataBinding，不需要的话，直接忽略，布局时按照自己的来；需要的话，在使用视图绑定的build.gradle里面添加如下代码：

android {
    dataBinding {
        enabled = true
    }
***************
}

 

一.添加依赖（在用到的模块）

implementation 'jp.co.cyberagent.android:gpuimage:2.0.4'

 

二.封装图片处理库gpuimage方法，工具类GPUImageUtil，包含单一效果处理方法、多效果集处理方法（同一张照片需要多个效果）

package com.example.module_utils.utils;

import android.graphics.Bitmap;

import jp.co.cyberagent.android.gpuimage.GPUImage;
import jp.co.cyberagent.android.gpuimage.filter.GPUImageBulgeDistortionFilter;
import jp.co.cyberagent.android.gpuimage.filter.GPUImageFilter;
import jp.co.cyberagent.android.gpuimage.filter.GPUImageGrayscaleFilter;
import jp.co.cyberagent.android.gpuimage.filter.GPUImageSaturationFilter;

/**
 * 图片处理
 *
 * @author mcl 2020.6.2
 */
public class GPUImageUtil {
    private static GPUImageFilter mGPUImageFilter;

    private static int progress;

    /**
     * 获取过滤器（还有其它很多的方法：高斯模糊、锐化等到，以下之列出三个，其它的自行补充）
     *
     * @param GPUFlag 选择滤镜类型
     * @return 滤镜
     */
    public static GPUImageFilter getGPUImageFilter(int GPUFlag) {
        switch (GPUFlag) {
            //灰色滤镜
            case 1:
                mGPUImageFilter = new GPUImageGrayscaleFilter();
                break;

            //鱼眼效果
            case 2:
                mGPUImageFilter = new GPUImageBulgeDistortionFilter();
                break;

            //饱和度
            case 3:
                mGPUImageFilter = new GPUImageSaturationFilter(progress);
                break;

            default:
                break;
        }

        return mGPUImageFilter;
    }

    /**
     * 处理图片
     *
     * @param mGPUImage
     * @param mBitmap    原图
     * @param filterType 选择滤镜类型
     * @return 返回处理好后的图片
     */
    public static Bitmap getGPUImage(GPUImage mGPUImage, Bitmap mBitmap, int filterType) {
        mGPUImage.setImage(mBitmap);
        mGPUImage.setFilter(getGPUImageFilter(filterType));
        mBitmap = mGPUImage.getBitmapWithFilterApplied();
        return mBitmap;
    }

    /**
     * 多种效果集处理照片（eg:灰度+鱼眼）（目前想到比较笨的方法，有改进时再发出来）
     * @param mGPUImage
     * @param mBitmap 原图
     * @param filterTypes 选择滤镜类型集
     * @return
     */
    public static Bitmap getGPUImages(GPUImage mGPUImage, Bitmap mBitmap, int[] filterTypes){
        Bitmap bitmap=mBitmap;
        if (filterTypes!=null && filterTypes.length>0){
            //循环处理照片，是基于上一次的处理结果照片上再次处理。eg:先灰度滤镜，再鱼眼效果
            for (int i=0;i<filterTypes.length;i++){
                mGPUImage.setImage(bitmap);
                mGPUImage.setFilter(getGPUImageFilter(filterTypes[i]));
                bitmap = mGPUImage.getBitmapWithFilterApplied();
            }
        }
        return bitmap;
    }

    /**
     * 在一些图像处理方法中用得的值，eg：饱和度、亮度
     *
     * @param progress 赋值
     */
    public static void progressValue(int progress) {
        GPUImageUtil.progress = progress;
    }

}

 

三.GpuImageActivity

public class GpuImageActivity extends AppCompatActivity {
    private ActivityGpuImageBinding mBinding;
    private GPUImage mGpuImage;
    private Bitmap mBitmap;
    private int[] filterTypes=new int[]{1,2};//图片处理效果集，先固定是灰色+鱼眼，可修改得更人性化一些，手动选择效果集

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mBinding = DataBindingUtil.setContentView(this, R.layout.activity_gpu_image);
        mBinding.setActivity(this);
        initView();
    }

    private void initView() {
        mGpuImage = new GPUImage(this);
        mBitmap = BitmapFactory.decodeResource(this.getResources(), R.mipmap.ye);
        mBinding.ivGpuImageOriginal.setImageBitmap(mBitmap);


        mBinding.sbGpuImage.setMax(10);//进度条最大值
        mBinding.sbGpuImage.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                GPUImageUtil.progressValue(progress);
                mBinding.ivGpuImageTransform.setImage(GPUImageUtil.getGPUImage(mGpuImage, mBitmap, 3));
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }

    /**
     * 灰色滤镜（点击事件）
     *
     * @param view
     */
    public void clickGrayScale(View view) {
        mBinding.ivGpuImageTransform.setImage(GPUImageUtil.getGPUImage(mGpuImage, mBitmap, 1));
    }

    /**
     * 鱼眼效果（点击事件）
     *
     * @param view
     */
    public void clickBulgeDistortion(View view) {
        mBinding.ivGpuImageTransform.setImage(GPUImageUtil.getGPUImage(mGpuImage, mBitmap, 2));
    }

    /**
     * 灰色滤镜+鱼眼效果（点击事件）
     * @param view
     */
    public void clickGrayBulge(View view){
        mBinding.ivGpuImageTransform.setImage(GPUImageUtil.getGPUImages(mGpuImage, mBitmap, filterTypes));
    }

}

 

四. 布局activity_gpu_image.xml，布局用到了dataBinding，如果不熟悉dataBinding的，按照自己的来布局即可，jp.co.cyberagent.android.gpuimage.GPUImageView控件用来显示处理后的图片，其它的随意。

注：android:scaleType="fitXY"是为了让图片充满控件

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="activity"
            type="com.example.module_login.ui.activity.GpuImageActivity" />

    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.activity.GpuImageActivity">

        <ImageView
            android:id="@+id/iv_gpuImage_original"
            android:layout_width="@dimen/dp_200"
            android:layout_height="@dimen/dp_200"
            android:layout_marginTop="@dimen/dp_20"
            android:scaleType="fitXY"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <SeekBar
            android:id="@+id/sb_gpuImage"
            android:layout_width="@dimen/dp_0"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_20"
            app:layout_constraintLeft_toLeftOf="@id/iv_gpuImage_original"
            app:layout_constraintRight_toRightOf="@id/iv_gpuImage_original"
            app:layout_constraintTop_toBottomOf="@id/iv_gpuImage_original" />


        <Button
            android:id="@+id/bt_gpuImage_grayScale"
            android:layout_width="@dimen/dp_0"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dp_40"
            android:onClick="@{activity.clickGrayScale}"
            android:text="@string/login_Grayscale"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/bt_gpuImage_bulgeDistortion"
            app:layout_constraintTop_toBottomOf="@id/sb_gpuImage" />

        <Button
            android:id="@+id/bt_gpuImage_bulgeDistortion"
            android:layout_width="@dimen/dp_0"
            android:layout_height="wrap_content"
            android:onClick="@{activity.clickBulgeDistortion}"
            android:text="@string/login_BulgeDistortion"
            app:layout_constraintRight_toLeftOf="@+id/bt_gpuImage_grayBulge"
            app:layout_constraintBottom_toBottomOf="@id/bt_gpuImage_grayScale"
            app:layout_constraintLeft_toRightOf="@id/bt_gpuImage_grayScale"
            app:layout_constraintTop_toTopOf="@id/bt_gpuImage_grayScale" />

        <Button
            android:id="@+id/bt_gpuImage_grayBulge"
            android:layout_width="@dimen/dp_0"
            android:layout_height="wrap_content"
            android:text="@string/login_grayBulge"
            android:onClick="@{activity.clickGrayBulge}"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintBottom_toBottomOf="@id/bt_gpuImage_bulgeDistortion"
            app:layout_constraintLeft_toRightOf="@+id/bt_gpuImage_bulgeDistortion"
            app:layout_constraintTop_toTopOf="@id/bt_gpuImage_bulgeDistortion" />


        <jp.co.cyberagent.android.gpuimage.GPUImageView
            android:id="@+id/iv_gpuImage_transform"
            android:layout_width="@dimen/dp_200"
            android:layout_height="@dimen/dp_200"
            android:layout_marginBottom="@dimen/dp_20"
            app:gpuimage_show_loading="false"
            app:gpuimage_surface_type="surface_view"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

 

到此就完成了，有不对的地方，多包含。在这篇文章中，学到最有用的是"多效果集处理方法"（名字好拗口，自己瞎取的）。一开始写的时候，我没有想到这个功能的，第一遍写完了，在检查全文有没有错误时，突发奇想，能不能把"多个效果"集合在同一张照片上面呢？然后就折腾起来，怎么封装更加合理。完成之后重新编辑文章。如果有更好的"多效果集处理方法"，麻烦评论区告诉我一下，小女子感激不尽！