iOS Objective-C中圆形UIImageView无法适配图片问题求助

我完全懂你的困扰——同样是设置圆形头像，有些图片能完美适配，有些却显示异常，还不想依赖第三方库对吧？咱们来一步步搞定这个问题。

问题根源 #

你当前的代码只是给UIImageView加了圆角和UIViewContentModeScaleAspectFit属性，但这个contentMode会让图片保持原比例完整显示在视图内。当图片宽高比和正方形的ImageView不一致时，图片无法填满整个View，裁剪成圆形后就会出现显示不全、边缘空白的情况。要实现完美的圆形头像，核心是先把任意比例的图片裁剪成正方形，再设置到ImageView中。

解决方案 #

我们可以给UIImage写一个分类方法，专门用来将任意图片裁剪成居中的正方形，之后再配合ImageView的设置就能实现理想效果。

第一步：添加UIImage分类实现裁剪逻辑

创建一个UIImage+SquareCrop分类：

#import <UIKit/UIKit.h>

@interface UIImage (SquareCrop)

- (UIImage *)cropToSquare;

@end

@implementation UIImage (SquareCrop)

- (UIImage *)cropToSquare {
    // 取图片宽高中的较小值作为正方形边长
    CGFloat sideLength = MIN(self.size.width, self.size.height);
    // 计算裁剪区域的原点，让裁剪后的正方形保持居中
    CGFloat xOffset = (self.size.width - sideLength) / 2.0;
    CGFloat yOffset = (self.size.height - sideLength) / 2.0;
    CGRect cropRect = CGRectMake(xOffset, yOffset, sideLength, sideLength);
    
    // 执行裁剪操作
    CGImageRef croppedImageRef = CGImageCreateWithImageInRect(self.CGImage, cropRect);
    UIImage *croppedImage = [UIImage imageWithCGImage:croppedImageRef 
                                               scale:self.scale 
                                         orientation:self.imageOrientation];
    CGImageRelease(croppedImageRef);
    
    return croppedImage;
}

@end

第二步：修改SubmitImage1方法适配裁剪后的图片

调整你的SubmitImage1:方法，先裁剪图片再设置到ImageView，同时修改contentMode为ScaleAspectFill让图片填满视图：

-(void)SubmitImage1:(UIImage *)image
{
    // 先将原图裁剪成正方形
    UIImage *squareImage = [image cropToSquare];
    // 设置裁剪后的图片到ImageView
    EditProfileImage.image = squareImage;
    
    // 保持圆形ImageView的基础设置
    EditProfileImage.layer.cornerRadius = EditProfileImage.frame.size.width / 2;
    // 改成ScaleAspectFill，让正方形图片填满整个ImageView
    [EditProfileImage setContentMode:UIViewContentModeScaleAspectFill];
    EditProfileImage.layer.masksToBounds = YES;
    EditProfileImage.layer.borderWidth = 3.0f;
    EditProfileImage.layer.borderColor = [UIColor blackColor].CGColor;
}

第三步：优化图片选择回调的冗余代码

你的imagePickerController:didFinishPickingImage:editingInfo:方法有几个可以优化的点，比如废弃API的替换、冗余初始化的清理：

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(NSDictionary *)info
{
    NSData *imageDataPicker = UIImageJPEGRepresentation(image, 0.1);
    if ([imageDataPicker length] < 2097152) { // 判断图片是否小于2MB
        [picker dismissViewControllerAnimated:YES completion:^{
            [self SubmitImage1:image];
        }];
    } else {
        // 可以在这里提示用户图片过大
        [picker dismissViewControllerAnimated:YES completion:nil];
    }
}

为什么这样有效？ #

1. 先把任意比例的图片裁剪成正方形，保证图片宽高比和ImageView完全匹配
2. UIViewContentModeScaleAspectFill让正方形图片填满整个ImageView，再通过masksToBounds裁剪成圆形，不管原图是什么比例，都能完美适配圆形头像

这样修改后，不管用户选择什么类型、什么分辨率的图片，都能正确显示成完整的圆形头像啦！

内容的提问来源于stack exchange，提问作者Swarup