Glide 圖片形狀裁剪 ，濾鏡等

Glide 、 Picasso 、 Fresco 已逐漸成為Android主流的圖片加載工具（個人見解，使用Volley、ImageLoader、xUtils的大佬們請勿噴~）,在多數Android程序員的印象中，它們只是加載圖片和緩存圖片的工具，其實它們還有很多強大的功能沒有被發掘...

今天，小編向各位介紹一下這些工具的新功能： 圖像轉換

下面是小編配合 Glide ，以 Glide Transformations 為例，寫的一個圖像轉化的Demo ：

Glide Transformations為Glide提供了圖像剪裁、模糊、蒙版、色彩過濾等功能。

接下來，小編用另一個簡單的事例說明Glide Transformations相關方法的使用~

詳解開始（小司機開車了~）

1.創建一個Android工程。

2.導入 [Glide Transformations] 庫。

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' }

3.在activity_main.xml添加兩個ImageView，一個顯示原圖片，一個顯示轉換后的圖片。

4.在Activity中使用Glide為兩個ImageView加載同一張圖片，但第2個ImageView會添加額外的位圖轉換方法。(舉例：加載方法如下)

Glide.with(this) .load(url) .into(mImageView1); Glide.with(this) .load(url) .bitmapTransform(new CropTransformation(this)) .into(mImageView2);

對於沒有使用過Glide的同學，小編做下簡要說明：

• Glide.with(this) ：使用Glide需要一個Context傳入。
• Glide.load(url) ：加載圖片的地址，可以是本地圖片id、文件路徑、網絡圖片地址（別忘記聯網權限）等等。
• Glide.into（mImageView1）：加載完圖片后需要在哪個ImageView中顯示。
• Glide.bitmapTransform（new CropTransformation(this)）：位圖轉換，也是小編接下來要使用的方法。

運行下程序，界面大概是這個樣子：

現在，看起來兩張圖片是一樣的，這是因為我們的轉換方法執行后和原圖片的顯示效果是一樣的。

接下來，開始進入正題，我們開始根據類別介紹Glide Transformations提供的圖片轉換方法：

1.圖片剪裁

CropCircleTransformation （圓形剪裁顯示）

// 原圖片加載省略 ...... // 使用構造方法 CropCircleTransformation(Context context) Glide.with(this) .load(url) .bitmapTransform(new CropCircleTransformation(this)) .into(mImageView2);

• CropSquareTransformation （正方形剪裁）

// 原圖片加載省略 ...... // 使用構造方法 CropSquareTransformation(Context context) Glide.with(this) .load(url) .bitmapTransform(new CropSquareTransformation(this)) .into(mImageView2);

• 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(mImageView2);

  

   

• 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(mImageView2);

  

   

  PS:如果使用CropTransformation一個參數的構造方法：只填入一個Context，后續會使用圖片原本的寬高進行剪裁，這實際上和沒有剪裁是一樣的。

2.顏色轉換

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);

3.模糊處理

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(mImageView2);

PS: 模糊處理是做過兼容的，當API>=18時使用RenderScript，API<18時使用FastBlur。

4.遮罩掩飾（視圖疊加處理）

• MaskTransformation

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

![MaskTransformation.png](http://upload-images.jianshu.io/upload_images/2693519-b517fb2e490cd9ec.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

5.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(mImageView2);

![ToonFilterTransformation.png](http://upload-images.jianshu.io/upload_images/2693519-f3e2319129c4906c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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(mImageView2);

• 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(mImageView2);

• 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(mImageView2);

• 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(mImageView2);

• 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(mImageView2);