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:
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:
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:
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:
https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg
Result image:
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:
https://oss.p74.cn/homepageImg_408390.jpg
Result image:
https://oss.p74.cn/homepageImg_408390.jpg?imageMogr2/thumbnail/1000x/crop/!1000x400a0a0