Glide image shape cropping, filters, etc.

 

Glide, Picasso, Fresco have gradually become the mainstream image loading tools for Android (personal opinion, use Volley, ImageLoader, xUtils, please do not spray ~), in the impression of most Android programmers, they just load pictures and cache pictures In fact, they still have many powerful functions that have not been discovered...

Today, I will introduce to you the new features of these tools: Image conversion

The following is an image transformation Demo written by the editor in cooperation with Glide, taking Glide Transformations as an example:

 

Glide Transformations provides Glide with image cropping, blurring, masking, color filtering and other functions.

Next, the editor uses another simple example to illustrate the use of Glide Transformations related methods~

The detailed explanation begins (the little driver is driving~)

1. Create an Android project.

2. Import the [Glide Transformations] library.

1. dependencies {

2.  

3. ......

4.  

5. // Glide

6. compile 'com.github.bumptech.glide:glide:3.7.0'

7.  

8. // Glide图形转换工具

9. compile 'jp.wasabeef:glide-transformations:2.0.1'

10.  

11. // GPUImage compile 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.3.0' }

3. Add two ImageViews in activity_main.xml, one showing the original picture and the other showing the converted picture.

4. Use Glide in the Activity to load the same image for two ImageViews, but the second ImageView will add additional bitmap conversion methods. (Example: The loading method is as follows)

1. Glide.with(this)

2. .load(url)

3. .into(mImageView1);

4.  

5. Glide.with(this)

6. .load(url)

7. .bitmapTransform(new CropTransformation(this))

8. .into(mImageView2);

For students who have not used Glide, the editor will give a brief explanation:

• Glide.with(this): Using Glide requires a Context to be passed in.
• Glide.load(url): The address to load the picture, which can be the local picture id, file path, network picture address (don't forget the network permission), etc.
• Glide.into (mImageView1): which ImageView needs to be displayed after loading the image.
• Glide.bitmapTransform (new CropTransformation(this)): Bitmap conversion is also the method I will use next.

Run the program, the interface looks like this:

 

Now, it looks like the two pictures are the same. This is because the display effect of our conversion method is the same as the original picture.

Next, let’s get to the main topic, we start to introduce the image conversion method provided by Glide Transformations according to the category:

1. Picture cropping

CropCircleTransformation (circle crop display)

1. // 原图片加载省略

2. ......

3.  

4. // 使用构造方法 CropCircleTransformation(Context context)

5. Glide.with(this)

6. .load(url)

7. .bitmapTransform(new CropCircleTransformation(this)) .into(mImageView2);

 

• CropSquareTransformation (square cut)

1. // 原图片加载省略

2. ......

3.  

4. // 使用构造方法 CropSquareTransformation(Context context)

5. Glide.with(this)

6. .load(url)

7. .bitmapTransform(new CropSquareTransformation(this)) .into(mImageView2);

 

• RoundedCornersTransformation (rounded corner trimming)

• 1. // 使用构造方法 RoundedCornersTransformation(Context context, int radius, int margin, CornerType cornerType)

  2. // radius ：圆角半径

  3. // margin ：填充边界

  4. // cornerType ：边角类型（可以指定4个角中的哪几个角是圆角，哪几个不是）

  5. Glide.with(this) .load(url) .bitmapTransform(new RoundedCornersTransformation(this, 100, 0, RoundedCornersTransformation.CornerType.ALL)) .into(mImageView2);

   

• CropTransformation (custom rectangular cropping)

  1. // 使用构造方法 CropTransformation(Context context, int width, int height, CropType cropType)

  2. // width : 剪裁宽度

  3. // height : 剪裁高度

  4. // cropType : 剪裁类型（指定剪裁位置，可以选择上、中、下其中一种）

  5. Glide.with(this) .load(url) .bitmapTransform(new CropTransformation(this, 600, 200, CropTransformation.CropType.CENTER)) .into(mImageView2);

   

  PS: If you use the construction method of CropTransformation as a parameter: only fill in a Context, and then use the original width and height of the picture for cropping, which is actually the same as without cropping.

2. Color conversion

ColorFilterTransformation (color filter)

1. // 使用构造方法 ColorFilterTransformation(Context context, int color)

2. // Color ：蒙层颜色值

3. Glide.with(this)

4. .load(url)

5. .bitmapTransform(new ColorFilterTransformation(this, 0x7900CCCC)) .into(mImageView2);

 

• GrayscaleTransformation (grayscale conversion)

1. // 使用构造方法 GrayscaleTransformation(Context context)

2. Glide.with(this)

3. .load(url)

4. .bitmapTransform(new GrayscaleTransformation(this))

5. .into(mImageView2);

 

3. Blur processing

BlurTransformation

1. // 使用构造方法 BlurTransformation(Context context, int radius, int sampling)

2. // radius : 离散半径/模糊度（单参构造器 - 默认25）

3. // sampling : 取样（单参构造器 - 默认1） 如果取2，横向、纵向都会每两个像素点取一个像素点(即:图片宽高变为原来一半)

4. Glide.with(this)

5. .load(url)

6. .bitmapTransform(new BlurTransformation(this, 100, 2)) .into(mImageView2);

 

PS: Blur processing is compatible. When API>=18, RenderScript is used, and when API<18, FastBlur is used.

4. Mask cover (view overlay processing)

• MaskTransformation

  1. // 使用构造方法 MaskTransformation(Context context, int maskId)

  2. // maskId ：遮罩物文件ID

  3. Glide.with(this)

  4. .load(url)

  5. .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 filtering (need to rely on GPUImage library)

• ToonFilterTransformation (cartoon filter)

  1. // 使用构造方法 ToonFilterTransformation(Context context, float threshold, float quantizationLevels)

  2. // threshold ：阀值（单参构造器 - 默认0.2F）影响色块边界的描边效果

  3. // quantizationLevels ：量化等级（单参构造器 - 默认10.0F）影响色块色彩

  4. Glide.with(this)

  5. .load(url)

  6. .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 (black ink filter)

1. // 使用构造方法 SepiaFilterTransformation(Context context, float intensity)

2. // intensity 渲染强度（单参构造器 - 默认1.0F）

3. Glide.with(this)

4. .load(url)

5. .bitmapTransform(new SepiaFilterTransformation(this, 1.0F)) .into(mImageView2);

 

• ContrastFilterTransformation (contrast filter)

1. // 使用构造方法 ContrastFilterTransformation(Context context, float contrast)

2. // contrast 对比度 （单参构造器 - 默认1.0F）

3. Glide.with(this)

4. .load(url)

5. .bitmapTransform(new ContrastFilterTransformation(this, 3F)) .into(mImageView2);

 

• InvertFilterTransformation (invert filter)

1. // 使用构造方法 InvertFilterTransformation(Context context)

2. Glide.with(this)

3. .load(url)

4. .bitmapTransform(new InvertFilterTransformation(this))

5. .into(mImageView2);

 

• PixelationFilterTransformation (pixelation filter)

1. // 使用构造方法 PixelationFilterTransformation(Context context, float pixel)

2. // pixel 像素值（单参构造器 - 默认10F）数值越大，绘制出的像素点越大，图像越失真

3. Glide.with(this)

4. .load(url)

5. .bitmapTransform(new PixelationFilterTransformation(this, 20F)) .into(mImageView2);

 

• SketchFilterTransformation (Sketch Filter)

1. // 使用构造方法 SketchFilterTransformation(Context context)

2. Glide.with(this)

3. .load(url)

4. .bitmapTransform(new SketchFilterTransformation(this))

5. .into(mImageView2);

 

• SwirlFilterTransformation (rotation filter)

1. // 使用构造方法 SwirlFilterTransformation(Context context, float radius, float angle, PointF center)

2. // radius 旋转半径[0.0F，1.0F] （单参构造器 - 默认0.5F）

3. // angle 角度[0.0F,无穷大）（单参构造器 - 默认1.0F）视图表现为旋转圈数

4. // center 旋转中心点 （单参构造器 - 默认new PointF(0.5F,0.5F)）

5. Glide.with(this) .load(url) .bitmapTransform(new SwirlFilterTransformation(this, 1.0F, 0.4F, new PointF(0.5F, 0.5F))) .into(mImageView2);

 

• BrightnessFilterTransformation (Brightness Filter)

1. // 使用构造方法 BrightnessFilterTransformation(Context context, float brightness)

2. // brightness 光亮强度[-1F,1F]（单参构造器 - 默认0.0F）小于-1F纯黑色,大于1F纯白色

3. Glide.with(this)

4. .load(url)

5. .bitmapTransform(new BrightnessFilterTransformation(this, 0.5F)) .into(mImageView2);

 

• KuwaharaFilterTransformation (Kuwahara filter)

1. // 使用构造方法 KuwaharaFilterTransformation(Context context, int radius)

2. // radius 半径 （单参构造器 - 默认25）

3. Glide.with(this)

4. .load(url)

5. .bitmapTransform(new KuwaharaFilterTransformation(this, 10)) .into(mImageView2);

 

• VignetteFilterTransformation (decorative image filter)

1. // 使用构造方法 VignetteFilterTransformation(Context context, PointF center, float[] color, float start, float end)

2. // center 装饰中心 （单参构造器 - 默认new PointF(0.5F, 0.5F)）

3. // color 颜色组合 （单参构造器 - 默认new float[0.0F,0.0F,0.0F]） 3个颜色值分别对应RGB3种颜色，取值范围都为[0.0F,1.0F]

4. // start 起始点 （单参构造器 - 默认0.0F）

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

 

 

Reprinted at: https://www.cnblogs.com/qianyukun/p/6867436.html