Glide、Picasso、Fresco进阶 - 图像转换

GlidePicassoFresco已逐渐成为Android主流的图片加载工具(个人见解,使用Volley、ImageLoader、xUtils的大佬们请勿喷~),在多数Android程序员的印象中,它们只是加载图片和缓存图片的工具,其实它们还有很多强大的功能没有被发掘...

今天,小编向各位介绍一下这些工具的新功能:图像转换

图像转换开源库(附: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为例,写的一个图像转化的Demo :

GildeTransformation.gif

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

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、File对象、网络图片地址(别忘记联网权限)等等。
  • Glide.into(mImageView1) :加载完图片后需要在哪个ImageView中显示。
  • Glide.bitmapTransform(new CropTransformation(this)) :位图转换,也是小编接下来要使用的方法。

运行下程序,界面大概是这个样子:

image2.png

现在,看起来两张图片是一样的,这是因为我们的转换方法执行后和原图片的显示效果是一样的。

接下来,开始进入正题,我们开始根据类别介绍Glide Transformations提供的图片转换方法:

1.图片剪裁

  • CropCircleTransformation (圆形剪裁显示)

      // 原图片加载省略
          ......
          
      // 使用构造方法 CropCircleTransformation(Context context)
      Glide.with(this)
          .load(url)
          .bitmapTransform(new CropCircleTransformation(this))
          .into(mImageView2);
    
    CropCircleTransformation.png
  • CropSquareTransformation (正方形剪裁)

      // 原图片加载省略
          ......
          
      // 使用构造方法 CropSquareTransformation(Context context)
      Glide.with(this)
              .load(url)
              .bitmapTransform(new CropSquareTransformation(this))
              .into(mImageView2);
    
    CropSquareTransformation.png
  • 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);
    
    RoundedCornersTransformation.png
  • 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);
    
    CropTransformation.png

    PS:如果使用CropTransformation一个参数的构造方法:只填入一个Context,后续会使用图片原本的宽高进行剪裁,这实际上和没有剪裁是一样的。

2.颜色转换

  • ColorFilterTransformation (颜色滤镜)

      // 使用构造方法 ColorFilterTransformation(Context context, int color)
      // Color :蒙层颜色值
      Glide.with(this)
              .load(url)
              .bitmapTransform(new ColorFilterTransformation(this, 0x7900CCCC))
              .into(mImageView2);
    
    ColorFilterTransformation.png
  • GrayscaleTransformation(灰度级转换)

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

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);
    
    BlurTransformation.png

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

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
  • SepiaFilterTransformation (乌墨色滤波器)

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

      // 使用构造方法 ContrastFilterTransformation(Context context, float contrast)
      // contrast 对比度 (单参构造器 - 默认1.0F)
      Glide.with(this)
              .load(url)
              .bitmapTransform(new ContrastFilterTransformation(this, 3F))
              .into(mImageView2);
    
    ContrastFilterTransformation.png
  • InvertFilterTransformation (反转滤波器)

      // 使用构造方法 InvertFilterTransformation(Context context)
      Glide.with(this)
              .load(url)
              .bitmapTransform(new InvertFilterTransformation(this))
              .into(mImageView2);
    
    InvertFilterTransformation.png
  • PixelationFilterTransformation (像素化滤波器)

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

      // 使用构造方法 SketchFilterTransformation(Context context)
      Glide.with(this)
              .load(url)
              .bitmapTransform(new SketchFilterTransformation(this))
              .into(mImageView2);
    
    SketchFilterTransformation.png
  • 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);
    
    SwirlFilterTransformation.png
  • 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);
    
    BrightnessFilterTransformation.png
  • KuwaharaFilterTransformation (Kuwahara滤波器)

      // 使用构造方法 KuwaharaFilterTransformation(Context context, int radius)
      // radius 半径 (单参构造器 - 默认25)
      Glide.with(this)
              .load(url)
              .bitmapTransform(new KuwaharaFilterTransformation(this, 10))
              .into(mImageView2);
    
    KuwaharaFilterTransformation.png
  • 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);
    
    VignetteFilterTransformation.png

Picasso Transformations 与 Glide Transformations用法基本一致,可以类比使用。
小编使用Fresco较少,对Fresco Processors就不再添油加醋了,各位可以参照GitHub链接进行学习。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容