Glide使用3 图片变换

2017-10-09

关于图片变换

图片变换的意思就是说，Glide从加载了原始图片到最终展示给用户之前，又进行了一些变换处理，从而能够实现一些更加丰富的图片效果，如图片圆角化、圆形化、模糊化等等。

基本用法

只需要在RequestOptions中串接transform()方法，并将想要执行的图片变换操作作为参数传入transform()方法即可。

RequestOptions options = new RequestOptions() 
        .transform(...); 
Glide.with(this) 
     .load(url) 
     .apply(options) 
     .into(imageView);

Glide 提供了几种内置的变换，可以直接使用，包括：

CenterCrop
FitCenter
CircleCrop

RequestOptions options = new RequestOptions() 
        .centerCrop(); 

RequestOptions options = new RequestOptions() 
        .fitCenter(); 

RequestOptions options = new RequestOptions() 
        .circleCrop();

这些内置的变换API其实是Glide对transform()方法进行了一层封装而已，源码中仍然还是借助transform()方法来实现。

以circleCrop()为例：

String url = "http://img4.imgtn.bdimg.com/it/u=2373086219,3296002021&fm=214&gp=0.jpg"; 
RequestOptions options = new RequestOptions() 
        .circleCrop(); 
Glide.with(this) 
     .load(url) 
     .apply(options) 
     .into(imageView);

效果如下

更多用法

多重变换

默认情况下，每个 transform() 调用，或任何特定转换方法(fitCenter(), centerCrop(), circleCrop())的调用都会替换掉之前的变换。

如果你想在单次加载中应用多个变换，需要使用 MultiTransformation 类。

1 2	RequestOptions options = new RequestOptions() .transform(new MultiTransformation<>(new CenterCrop(), new CircleCrop()));

效果如下

定制变换

除了使用内置的图片变换操作，完全可以自己定制一个图片变换，包括圆角化、圆形化、黑白化、模糊化等等。

这里暂时介绍一个开源库 glide-transformations。它实现了很多通用的图片变换效果，如裁剪变换、颜色变换、模糊变换等等，可以非常轻松地进行各种各样的图片变换。

glide-transformations的项目主页地址是 :

https://github.com/wasabeef/glide-transformations

在build.gradle(Moudle: xxx)添加依赖：

1
2
3

dependencies {
    compile 'jp.wasabeef:glide-transformations:3.0.1'
}

接下来就可以设置transform，以进行模糊化处理为例：

String url = "http://img1.3lian.com/2015/a1/91/d/240.jpg";
RequestOptions options = new RequestOptions()
        .transform(new BlurTransformation(25));
Glide.with(this).load(url)
        .apply(options)
        .into(imageView);

效果如下

同样可以设置多重变换，以进行模糊化处理和黑白化处理为例：

String url = "http://img1.3lian.com/2015/a1/91/d/240.jpg";
RequestOptions options = new RequestOptions()
        .transform(new MultiTransformation<>(new BlurTransformation(), new GrayscaleTransformation()));
Glide.with(this).load(url)
        .apply(options)
        .into(imageView);

效果如下

这只是glide-transformations库的一小部分功能而已，更多的图片变换效果可以到它的GitHub项目主页去学习。