[Android] Implement "topCrop" of ImageView's scaleType

We want to display the upper part of a long picture (a 600 * 850 picture is displayed on a 100 * 200 ImageView. The upper part is displayed first, which is equivalent to changing centerCrop to topCrop) as shown below:
insert image description here

We all know that the centerCrop of ImageView's scaleType is the most commonly used, and it will be cropped according to the most appropriate ratio, and the middle part will be reserved. Still this picture, the effect is as follows:
insert image description here
but the requirement is to display the top;

Idea: We calculate the width and height of the picture, and then crop the height to a predetermined ratio. Get a picture of the top. Then display it on the imageView

plan 1:

Calculate image width and height: There are many ways, we only list one:

//通过glide获取宽高以及bitmap
Glide.with(context).asBitmap() 
     .load(url)
     .into(new SimpleTarget<Bitmap>() {
    
    
          @Override
          public void onResourceReady(@NonNull @NotNull Bitmap resource, @Nullable @org.jetbrains.annotations.Nullable Transition<? super Bitmap> transition) {
    
    
            int maxWidth  = resource.getWidth();
            int maxHeight = resource.getHeight() * (176 * 100 / 315) / 100;
                try {
    
    
                     //裁剪获取(0, 0, maxWidth, maxHeight)范围的图像
                    Bitmap smallBitmap =Bitmap.createBitmap(resource, 0, 0, maxWidth, maxHeight);  
                    iv_image_xxl.setImageBitmap(smallBitmap);
                } catch (Exception ex) {
    
    
					LxUtils.setImage(context, url, holder.iv_image_xxl);
              }
          }
  });

Option 2: Image of Ali OSS (if appropriate, preferred)

If it is a picture stored by Alibaba Cloud OSS . There is also a more concise way like that:

We can get the picture we want through oss image processing (zooming + cropping)

Although oss provides information for obtaining pictures:
insert image description here
but this requires a network request, do not take

It can be processed by image scaling + custom cropping
; other processing methods can be viewed by yourself

1. Zoom, zoom the picture to an appropriate ratio. The purpose of this is to get a width we know.
2. According to the proportion. Calculate the height we want to get
3. Crop according to the width and height ( the clipping rules are as shown in the figure url )

Original image:

insert image description here

https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg

Result image:

insert image description here

https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_800,limit_0/crop,w_800,h_300

If the height is not enough when cropping. Then we can adapt it through the centerCrop of scaleType that comes with android.

Option 3: Pictures of Qiniu OSS (if appropriate, preferred)

The principle is the same as above

Directly give the document ( zoom document + custom cropping ) + final cropping scheme

Original image:

insert image description here
https://oss.p74.cn/homepageImg_408390.jpg

Result image:

insert image description here

https://oss.p74.cn/homepageImg_408390.jpg?imageMogr2/thumbnail/1000x/crop/!1000x400a0a0

you're done

Guess you like

Origin blog.csdn.net/mingtiannihao0522/article/details/123566882