UIImageView image aspect ratio is messed up after redrawing it to create a round mask

Question

My app sends a GET request to google to attain certain user information. One piece of crucial returned data is a users picture which is placed inside a UIImageView that is always exactly (100, 100) then redrawn to create a round mask for this imageView. These pictures come from different sources and thus always have different aspect ratios. Some have a smaller width compared to their height, sometimes it's vice-versa. This results in the image looking compressed. I've tried things such as the following (none of them worked):

_personImage.layer.masksToBounds    = YES;
_personImage.layer.borderWidth      = 0;
_personImage.contentMode    = UIViewContentModeScaleAspectFit;
_personImage.clipsToBounds  = YES;

Here is the code I use to redraw my images (it was attained from user fnc12 as the third answer in Making a UIImage to a circle form):

/** Returns a redrawn image that had a circular mask created for the inputted image. */
-(UIImage *)roundedRectImageFromImage:(UIImage *)image size:(CGSize)imageSize withCornerRadius:(float)cornerRadius
{
    UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);   //<== Notice 0.0 as third scale parameter. It is important because default draw scale ≠ 1.0. Try 1.0 - it will draw an ugly image...
    CGRect bounds       = (CGRect){CGPointZero, imageSize};
    [[UIBezierPath bezierPathWithRoundedRect:bounds cornerRadius:cornerRadius] addClip];
    [image drawInRect:bounds];
    UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return finalImage;
}

This method is always called like so:

[_personImage setImage:[self roundedRectImageFromImage:image size:CGSizeMake(_personImage.frame.size.width, _personImage.frame.size.height) withCornerRadius:_personImage.frame.size.width/2]];

So I end up having a perfectly round image but the image it self isn't right aspect-wise. Please help.

P.S. Here's how images look when their width is roughly 70% that of their height before the redrawing of the image to create a round mask:

why don't you set the corner radius of the _personImage's layer instead? — juanjo, Jan 10 '16 at 22:03
_personImage.layer.cornerRadius = _personImage.bounds.size.width; _personImage.contentMode = UIViewContentModeScaleAspectFill; — Vũ Ngọc Giang, Jan 11 '16 at 04:56

score 1 · Accepted Answer · answered Mar 11 '16 at 08:16

Hello dear friend there!

Here is my version that works:

Code in ViewController:

[self.profilePhotoImageView setContentMode:UIViewContentModeCenter];
[self.profilePhotoImageView setContentMode:UIViewContentModeScaleAspectFill];
[CALayer roundView:self.profilePhotoImageView];

roundView function in My CALayer+Additions class:

+(void)roundView:(UIView*)view{
    CALayer *viewLayer = view.layer;
    [viewLayer setCornerRadius:view.frame.size.width/2];
    [viewLayer setBorderWidth:0];
    [viewLayer setMasksToBounds:YES];
}

May be you should try to change your way to create rounded ImageView using my version that create rounded ImageView by modifying ImageView's view layer . Hope it helps.

score 0 · Answer 2 · answered Jan 10 '16 at 19:07

0

To maintain aspect ratio of UIImageView, after setting image use following line of code.

[_personImage setContentMode:UIViewContentModeScaleAspectFill];

For detailed description follow reference link:
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImageView_Class/

answered Jan 10 '16 at 19:07

Aamir

16,329
10
59
65

I still have the exact same problem. Your solution unfortunately doesn't fix it. – Krekin Jan 10 '16 at 19:31

UIImageView image aspect ratio is messed up after redrawing it to create a round mask

2 Answers2