Glide、Picasso、Fresco進階 - 圖像轉(zhuǎn)換

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

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

圖像轉(zhuǎn)換開源庫（附：GitHub鏈接）

Glide Transformations
https://github.com/wasabeef/glide-transformations
Picasso Transformations
https://github.com/wasabeef/picasso-transformations
Fresco Processors
https://github.com/wasabeef/fresco-processors

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

GildeTransformation.gif

GitHub地址：https://github.com/sinawangnan/GlideTransformation

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

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

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

1.創(chuàng)建一個Android工程。

2.導(dǎo)入 [Glide Transformations] 庫。

dependencies {
    
    ......
    
    // Glide
    compile 'com.github.bumptech.glide:glide:3.7.0'

    // Glide圖形轉(zhuǎn)換工具
    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，一個顯示原圖片，一個顯示轉(zhuǎn)換后的圖片。

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

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

對于沒有使用過Glide的同學(xué)，小編做下簡要說明：

  • Glide.with(this) ：使用Glide需要一個Context傳入。
  • Glide.load(url) ：加載圖片的地址，可以是本地圖片資源id、File對象、網(wǎng)絡(luò)圖片地址（別忘記聯(lián)網(wǎng)權(quán)限）等等。
  • Glide.into(mImageView1) ：加載完圖片后需要在哪個ImageView中顯示。
  • Glide.bitmapTransform(new CropTransformation(this)) ：位圖轉(zhuǎn)換，也是小編接下來要使用的方法。

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

image2.png

現(xiàn)在，看起來兩張圖片是一樣的，這是因為我們的轉(zhuǎn)換方法執(zhí)行后和原圖片的顯示效果是一樣的。

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

1.圖片剪裁

  • CropCircleTransformation （圓形剪裁顯示）

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

  • CropSquareTransformation （正方形剪裁）

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

  • RoundedCornersTransformation （圓角剪裁）

      // 使用構(gòu)造方法 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);
    RoundedCornersTransformation.png

  • CropTransformation （自定義矩形剪裁）

      // 使用構(gòu)造方法 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);
    CropTransformation.png

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

2.顏色轉(zhuǎn)換

  • ColorFilterTransformation （顏色濾鏡）

      // 使用構(gòu)造方法 ColorFilterTransformation(Context context, int color)
  // Color ：蒙層顏色值
  Glide.with(this)
          .load(url)
          .bitmapTransform(new ColorFilterTransformation(this, 0x7900CCCC))
          .into(mImageView2);
    ColorFilterTransformation.png

  • GrayscaleTransformation（灰度級轉(zhuǎn)換）

      // 使用構(gòu)造方法 GrayscaleTransformation(Context context)
  Glide.with(this)
          .load(url)
          .bitmapTransform(new GrayscaleTransformation(this))
          .into(mImageView2);
    GrayscaleTransformation.png

3.模糊處理

  • BlurTransformation

      // 使用構(gòu)造方法 BlurTransformation(Context context, int radius, int sampling) 
  // radius : 離散半徑/模糊度（單參構(gòu)造器 - 默認(rèn)25）
  // sampling : 取樣（單參構(gòu)造器 - 默認(rèn)1） 如果取2，橫向、縱向都會每兩個像素點取一個像素點(即:圖片寬高變?yōu)樵瓉硪话?
  Glide.with(this)
          .load(url)
          .bitmapTransform(new BlurTransformation(this, 100, 2))
          .into(mImageView2);
    BlurTransformation.png

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

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

  • MaskTransformation

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

5.GPU過濾（需要依賴GPUImage庫）

  • ToonFilterTransformation （卡通濾波器）

      // 使用構(gòu)造方法 ToonFilterTransformation(Context context, float threshold, float quantizationLevels)
  // threshold ：閥值（單參構(gòu)造器 - 默認(rèn)0.2F）影響色塊邊界的描邊效果
  // quantizationLevels ：量化等級（單參構(gòu)造器 - 默認(rèn)10.0F）影響色塊色彩
  Glide.with(this)
          .load(url)
          .bitmapTransform(new ToonFilterTransformation(this, 0.2F, 10F))
          .into(mImageView2);
    ToonFilterTransformation.png

  • SepiaFilterTransformation (烏墨色濾波器)

      // 使用構(gòu)造方法 SepiaFilterTransformation(Context context, float intensity)
  // intensity 渲染強度（單參構(gòu)造器 - 默認(rèn)1.0F）
  Glide.with(this)
          .load(url)
          .bitmapTransform(new SepiaFilterTransformation(this, 1.0F))
          .into(mImageView2);
    SepiaFilterTransformation.png

  • ContrastFilterTransformation (對比度濾波器)

      // 使用構(gòu)造方法 ContrastFilterTransformation(Context context, float contrast)
  // contrast 對比度 （單參構(gòu)造器 - 默認(rèn)1.0F）
  Glide.with(this)
          .load(url)
          .bitmapTransform(new ContrastFilterTransformation(this, 3F))
          .into(mImageView2);
    ContrastFilterTransformation.png

  • InvertFilterTransformation （反轉(zhuǎn)濾波器）

      // 使用構(gòu)造方法 InvertFilterTransformation(Context context)
  Glide.with(this)
          .load(url)
          .bitmapTransform(new InvertFilterTransformation(this))
          .into(mImageView2);
    InvertFilterTransformation.png

  • PixelationFilterTransformation （像素化濾波器）

      // 使用構(gòu)造方法 PixelationFilterTransformation(Context context, float pixel)
  // pixel 像素值（單參構(gòu)造器 - 默認(rèn)10F）數(shù)值越大，繪制出的像素點越大，圖像越失真
  Glide.with(this)
          .load(url)
          .bitmapTransform(new PixelationFilterTransformation(this, 20F))
          .into(mImageView2);
    PixelationFilterTransformation.png

  • SketchFilterTransformation （素描濾波器）

      // 使用構(gòu)造方法 SketchFilterTransformation(Context context)
  Glide.with(this)
          .load(url)
          .bitmapTransform(new SketchFilterTransformation(this))
          .into(mImageView2);
    SketchFilterTransformation.png

  • SwirlFilterTransformation （旋轉(zhuǎn)濾波器）

      // 使用構(gòu)造方法 SwirlFilterTransformation(Context context, float radius, float angle, PointF center)
  // radius 旋轉(zhuǎn)半徑[0.0F，1.0F] （單參構(gòu)造器 - 默認(rèn)0.5F）
  // angle 角度[0.0F,無窮大）（單參構(gòu)造器 - 默認(rèn)1.0F）視圖表現(xiàn)為旋轉(zhuǎn)圈數(shù)
  // center 旋轉(zhuǎn)中心點 （單參構(gòu)造器 - 默認(rèn)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);
    SwirlFilterTransformation.png

  • BrightnessFilterTransformation （亮度濾波器）

      // 使用構(gòu)造方法 BrightnessFilterTransformation(Context context, float brightness)
  // brightness 光亮強度[-1F,1F]（單參構(gòu)造器 - 默認(rèn)0.0F）小于-1F純黑色,大于1F純白色
  Glide.with(this)
          .load(url)
          .bitmapTransform(new BrightnessFilterTransformation(this, 0.5F))
          .into(mImageView2);
    BrightnessFilterTransformation.png

  • KuwaharaFilterTransformation （Kuwahara濾波器）

      // 使用構(gòu)造方法 KuwaharaFilterTransformation(Context context, int radius)
  // radius 半徑 （單參構(gòu)造器 - 默認(rèn)25）
  Glide.with(this)
          .load(url)
          .bitmapTransform(new KuwaharaFilterTransformation(this, 10))
          .into(mImageView2);
    KuwaharaFilterTransformation.png

  • VignetteFilterTransformation （裝飾圖濾波器）

      // 使用構(gòu)造方法 VignetteFilterTransformation(Context context, PointF center, float[] color, float start, float end)
  // center 裝飾中心 （單參構(gòu)造器 - 默認(rèn)new PointF(0.5F, 0.5F)）
  // color 顏色組合 （單參構(gòu)造器 - 默認(rèn)new float[0.0F,0.0F,0.0F]） 3個顏色值分別對應(yīng)RGB3種顏色，取值范圍都為[0.0F,1.0F]
  // start 起始點 （單參構(gòu)造器 - 默認(rèn)0.0F）
  // end 終止點 （單參構(gòu)造器 - 默認(rèn)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);
    VignetteFilterTransformation.png

Picasso Transformations 與 Glide Transformations用法基本一致，可以類比使用。
小編使用Fresco較少，對Fresco Processors就不再添油加醋了，各位可以參照GitHub鏈接進行學(xué)習(xí)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容