Glide、Picasso、Fresco進階 - 圖像轉換

ecix4982 8年前發布 | 15K 次閱讀 Fresco Android開發移動開發

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

Picasso Transformations 與 Glide Transformations用法基本一致，可以類比使用。

小編使用Fresco較少，對Fresco Processors就不再添油加醋了，各位可以參照GitHub鏈接進行學習。

來自：http://www.jianshu.com/p/976c86fa72bc

本文由用戶 ecix4982 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1479371795283.html

Fresco Android開發移動開發

Glide、Picasso、Fresco進階 - 圖像轉換

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

相關經驗

相關資訊

相關文檔

目錄