Objective C: How to fix aspect ratio of image (and not change to fit imageview frame)

Question

I am using the UIImagePickerController to select images for my app. However I am facing some challenges with regards to maintaining aspect ratio of the selected images

For example,

I have a raw image on the phone as follows (not square image):

After selecting the image on iphone via the 'move and scale' page to crop image, the result is as follows: (aspect ratio is still maintained here)

My app will display the selected image in a UIImageView with a square frame (200 x 200). After setting the selected image to the UIImageView (UIImageView.image = selectedImage), the image's aspect ratio is not maintained but instead followed the frame of the UIImageView: (The image looks skewed now in my UIImageView):

Is there any way to maintain the aspect ratio of the image in this case?

EDIT: Update expected result

After some thinking, I realize that the best way to resolve my issue is to ensure that for such images (non square), I need to 'convert' them into square images i.e. fill the empty spaces on top and bottom of images to make a square e.g.

Expected image: (with the top and bottom borders added)

EDIT: Update with sample code

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)img editingInfo:(NSDictionary *)editInfo 
{

    self.imageView.contentMode = UIViewContentModeScaleAspectFill;

    self.imageView.image = image;
    [[picker parentViewController] dismissModalViewControllerAnimated:YES];

    //Compress image
    UIImage *image = [self scaleImage:img toSize:CGSizeMake(612.0,612.0)];

    self.imageData = UIImageJPEGRepresentation(image, 0.75);
}

By adding the code "self.imageView.contentMode = UIViewContentModeScaleAspectFill;", I was able to obtain the square image in the uiimageview

But it seems like the original image was still not a square image, hence the skewing problem will still occur when I do "UIImage *image = [self scaleImage:img toSize:CGSizeMake(612.0,612.0)];". Is my assumption correct? Anyway to mitigate this issue as I will still need to display the 'compressed' image elsewhere in the app.

Unloose

@edo42, thanks a million for pointing me to the post, it's exactly what I needed. Can you post your comment as an answer so that I can accept it. Thanks again – Unloose

Try to read this other answer: #1703600 – Babbie

For a strange reason I can't, it always post me a comment – Babbie

Answer 1

Doing myImageView.contentMode = UIViewContentModeScaleAspectFit; isn't enough because it changes the aspect ratio of the image in the way Zhen wants, but it doesn't change the source image, which is what Zhen needs. The only way to do that is to use the UIGraphicsImageContext as explained there: Resize UIImage with aspect ratio?

Babbie

Answer 2

You should adjust your UIImageView's content mode:

myImageView.contentMode = UIViewContentModeScaleAspectFit;

Just for the kicks - check documentation on UIViewContentMode constants.

Ethos

this is now myImageView.contentMode = UIView.ContentMode.scaleAspectFit – Casarez

Answer 3

You can set the contentMode property on your UIImageView instance, like:

myImageView.contentMode = UIViewContentModeScaleAspectFit;

This will force it to preserve your image's aspect-ratio when scaling. There are also a number of other values you can set here to produce other behaviors, as described in the reference documentation.

Dedie

thanks for your response. However, I am still unable to get preserve the aspect ratio of the image. Is there any way to fill up the top and bottom spaces of the image to make it into a square image in the first place? – Unloose

@Unloose - then use UIViewContentModeScaleAspectFill content mode; – Ethos

@Eimantas, I need to change the original image as well so that it becomes a square by adding additional borders if required. The AspectFill method seems to be only affecting the display but doesn't modify the image itself. Any suggestions? Thanks! – Unloose

@Unloose - There is, but it's not easy or efficient. You'd need to create your own graphics context and draw your image into it in the appropriate position. But I'm confused as to why contentMode does not work for you. Can you post some sample code? – Dedie

@aroth, the contentMode works. The complication comes when I need to compress the photo (see my sample code). I am assuming the photo is always a square which will still pose an issue as I believe the contentMode method does not change the original image's dimension? – Unloose