Android之Glide图像处理

经过了一段时间的忙碌，终于有一点点自己的学习时间，后悔在前段时间的开发中遇到好多有趣的问题，虽然解决了，但是都没有时间记录下来，准备接下来补上。看到了Glide圆角加载后，深入了解才知道还有其他的变换，Glide不仅是加载图片和缓存图片的工具，同样是实现图像转换的强大工具。

针对Glide的V3版（文末追加V4版本的图片圆角和圆形处理）

以 Glide Transformations为例：Glide Transformations为Glide提供了图像剪裁、模糊、蒙版、色彩过滤等功能。

基本配置：

dependencies {
    // Glide
    compile 'com.github.bumptech.glide:glide:3.7.0'
    // Glide图形转换工具
    compile 'jp.wasabeef:glide-transformations:2.0.1'
    // GPUImage
    compile 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.3.0'
}

简要说明：

//with(this) ：使用Glide需要一个Context传入。
//load(url) ：加载图片的地址，可以是本地图片id、文件路径、网络图片地址等。
//into（mImageView1）：加载完图片后需要在哪个ImageView中显示
//bitmapTransform（new CropTransformation(this)）：位图转换
Glide.with(this)
     .load(url)
     .bitmapTransform(new CropTransformation(this))
     .into(mImageView);

图片剪裁：

• CropCircleTransformation（圆形剪裁）

// 使用构造方法 CropCircleTransformation(Context context)
Glide.with(this)
     .load(url)
     .bitmapTransform(new CropCircleTransformation(this))
     .into(mImageView);

• CropSquareTransformation（正方形剪裁）

// 使用构造方法 CropSquareTransformation(Context context)
Glide.with(this)
     .load(url)
     .bitmapTransform(new CropSquareTransformation(this))
     .into(mImageView);

• RoundedCornersTransformation （圆角剪裁）

//使用构造方法 RoundedCornersTransformation(Context context,int radius, int margin, CornerType cornerType)
// radius ：圆角半径
// margin ：填充边界 
// cornerType ：边角类型（可以指定4个角中的哪几个角是圆角）
  Glide.with(this)
       .load(url)
       .bitmapTransform(new RoundedCornersTransformation(this, 100, 0, RoundedCornersTransformation.CornerType.ALL))
       .into(mImageView);

• CropTransformation （自定义矩形剪裁）

// 使用构造方法 CropTransformation(Context context, int width, int height, CropType cropType)
// width : 剪裁宽度
// height : 剪裁高度
// cropType : 剪裁类型（指定剪裁位置，可以选择上、中、下其中一种）
  Glide.with(this)
       .load(url)
       .bitmapTransform(new CropTransformation(this, 600, 200, CropTransformation.CropType.CENTER))
       .into(mImageView);

注：使用CropTransformation一个参数的构造方法：只填Context会使用图片原本的宽高进行剪裁，但图片大小没有改变。

颜色转换：

ColorFilterTransformation（颜色滤镜）

//使用构造方法 ColorFilterTransformation(Context context, int color)
//Color：蒙层颜色值
Glide.with(this)
     .load(url)
     .bitmapTransform(new ColorFilterTransformation(this, 0x7900CCCC))
     .into(mImageView2);

• GrayscaleTransformation（灰度级转换）

// 使用构造方法 GrayscaleTransformation(Context context)
  Glide.with(this)
          .load(url)
          .bitmapTransform(new GrayscaleTransformation(this))
          .into(mImageView2);

模糊处理：

• BlurTransformation

// 使用构造方法 BlurTransformation(Context context, int radius, int sampling) 
// radius : 离散半径/模糊度（单参构造器 - 默认25）
// sampling : 取样（单参构造器 - 默认1） 如果取2，横向、纵向都会每两个像素点取一个像素点(即:图片宽高变为原来一半)
Glide.with(this)
     .load(url)
     .bitmapTransform(new BlurTransformation(this, 100, 2))
     .into(mImageView);

注：模糊处理是做过兼容的，当API>=18时使用RenderScript，API<18时使用FastBlur。

遮罩掩饰（视图叠加处理）

• MaskTransformation

// 使用构造方法 MaskTransformation(Context context, int maskId)
  // maskId ：遮罩物文件ID
  Glide.with(this)
          .load(url)
          .bitmapTransform(new MaskTransformation(this, R.mipmap.ic_launcher))
          .into(mImageView);

GPU过滤（需要依赖GPUImage库）

• ToonFilterTransformation （卡通滤波器）

// 使用构造方法 ToonFilterTransformation(Context context, float threshold, float quantizationLevels)
// threshold ：阀值（单参构造器 - 默认0.2F）影响色块边界的描边效果
// quantizationLevels ：量化等级（单参构造器 - 默认10.0F）影响色块色彩
Glide.with(this)
     .load(url)
     .bitmapTransform(new ToonFilterTransformation(this, 0.2F, 10F))
     .into(mImageView);

• SepiaFilterTransformation (乌墨色滤波器)

// 使用构造方法 SepiaFilterTransformation(Context context, float intensity)
// intensity 渲染强度（单参构造器 - 默认1.0F）
Glide.with(this)
     .load(url)
     .bitmapTransform(new SepiaFilterTransformation(this, 1.0F))
     .into(mImageView2);

• ContrastFilterTransformation (对比度滤波器)

// 使用构造方法 ContrastFilterTransformation(Context context, float contrast)
// contrast 对比度 （单参构造器 - 默认1.0F）
Glide.with(this)
     .load(url)
     .bitmapTransform(new ContrastFilterTransformation(this, 3F))
     .into(mImageView);

• InvertFilterTransformation （反转滤波器）

// 使用构造方法 InvertFilterTransformation(Context context)
Glide.with(this)
     .load(url)
     .bitmapTransform(new InvertFilterTransformation(this))
     .into(mImageView2);

• PixelationFilterTransformation （像素化滤波器）

//使用构造方法 PixelationFilterTransformation(Context context, float pixel)
//pixel 像素值（单参构造器 - 默认10F）数值越大，绘制出的像素点越大，图像越失真
Glide.with(this)
     .load(url)
     .bitmapTransform(new PixelationFilterTransformation(this, 20F))
     .into(mImageView);

• SketchFilterTransformation （素描滤波器）

//使用构造方法 SketchFilterTransformation(Context context)
Glide.with(this)
     .load(url)
     .bitmapTransform(new SketchFilterTransformation(this))
     .into(mImageView2);

• SwirlFilterTransformation （旋转滤波器）

// 使用构造方法 SwirlFilterTransformation(Context context, float radius, float angle, PointF center)
// radius 旋转半径[0.0F，1.0F] （单参构造器 - 默认0.5F）
// angle 角度[0.0F,无穷大）（单参构造器 - 默认1.0F）视图表现为旋转圈数
// center 旋转中心点 （单参构造器 - 默认new PointF(0.5F,0.5F)）
Glide.with(this)
     .load(url)
     .bitmapTransform(new SwirlFilterTransformation(this, 1.0F, 0.4F, new PointF(0.5F, 0.5F)))
     .into(mImageView);

• BrightnessFilterTransformation （亮度滤波器）

// 使用构造方法 BrightnessFilterTransformation(Context context, float brightness)
// brightness 光亮强度[-1F,1F]（单参构造器 - 默认0.0F）小于-1F纯黑色,大于1F纯白色
Glide.with(this)
     .load(url)
     .bitmapTransform(new BrightnessFilterTransformation(this, 0.5F))
     .into(mImageView2);

• KuwaharaFilterTransformation （Kuwahara滤波器）

// 使用构造方法 KuwaharaFilterTransformation(Context context, int radius)
// radius 半径 （单参构造器 - 默认25）
Glide.with(this)
     .load(url)
     .bitmapTransform(new KuwaharaFilterTransformation(this, 10))
     .into(mImageView);

• VignetteFilterTransformation （装饰图滤波器）

// 使用构造方法 VignetteFilterTransformation(Context context, PointF center, float[] color, float start, float end)
// center 装饰中心 （单参构造器 - 默认new PointF(0.5F, 0.5F)）
// color 颜色组合 （单参构造器 - 默认new float[0.0F,0.0F,0.0F]） 3个颜色值分别对应RGB3种颜色，取值范围都为[0.0F,1.0F]
// start 起始点 （单参构造器 - 默认0.0F）
// end 终止点 （单参构造器 - 默认0.75F）
Glide.with(this)
     .load(url)
     .bitmapTransform(new VignetteFilterTransformation(this, new PointF(0.5F, 0.5F), new float[]{0.0F, 0.0F, 0.0F}, 0.0F, 0.5F))
     .into(mImageView);

Glide的V4版本

针对Glide的V4版本，进行圆角、圆形处理

添加依赖：在module的gradle中添加：

implementation 'com.github.bumptech.glide:glide:4.7.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.7.1'

 开放网络权限：

 <uses-permission android:name="android.permission.INTERNET"/>

布局文件：activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/circle"
        android:layout_width="120dp"
        android:layout_height="120dp" />
    <ImageView
        android:id="@+id/round1"
        android:layout_width="120dp"
        android:layout_height="120dp" />
    <ImageView
        android:id="@+id/round2"
        android:layout_width="120dp"
        android:layout_height="120dp" />

</LinearLayout>

 代码中使用：

public class MainActivity extends AppCompatActivity {
    ImageView circle, round1, round2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();
    }

    private void initView() {
        circle = findViewById(R.id.circle);
        round1 = findViewById(R.id.round1);
        round2 = findViewById(R.id.round2);

        Glide.with(this)
                .load("http://img5.duitang.com/uploads/item/201506/07/20150607110911_kY5cP.jpeg")
                .apply(RequestOptions.bitmapTransform(new CircleCrop()))
                .into(circle);

        Glide.with(this)
                .load("http://img.jiuzheng.com/memberlogo/s/57/0a/570af0f48f1e0327178b468d.jpg")
                .apply(RequestOptions.bitmapTransform(new RoundedCorners(20)))//圆角半径
                .into(round1);

        Glide.with(this)
                .load("http://img.jiuzheng.com/memberlogo/s/57/0a/570af0f48f1e0327178b468d.jpg")
                .apply(RequestOptions.bitmapTransform(new RoundedCorners(60)))//圆角半径
                .into(round2);
    }
}

使用GlideApp

在Glide4.0之后load(url)之后就不能调用.placeholder()等方法，4.0+的文档发现需要通过GlideApp来调用一系列方法

新建一个类继承AppGlideModule，类添加GlideModule：

import com.bumptech.glide.annotation.GlideModule;
import com.bumptech.glide.module.AppGlideModule;

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {
      //可以配置Glide
}

然后，Make Module一下，即可使用。