crop section from resizeable UIImageView's image

Question

I have a UIImageView that gets its image from UIImagePickerController The UIImageView is set to Aspect Fit Im using gesture recognizers to move, scale, and rotate this UIImageView

I have a second, much smaller UIImageView The second UIImageView is in front of and centered with the first

What I would like to do is be able to move, scale, and rotate the first UIImageView into position, then press a button to create a new image containing only the section of the original image that can be seen within the bounds of the second UIImageView

I have tried quite a few ways of cropping the image without success. Everything I tried will crop the image but the returned image is not what I expect. What I get back appears to be a rotated portion of the top, right hand, section of the FULL SIZE image.

I am using the UIImage Categories from Trevor's Bike Shed

My code:

.h

@interface BubbleBossViewController : UIViewController <UIImagePickerControllerDelegate, UINavigationControllerDelegate, UIGestureRecognizerDelegate>{
    IBOutlet UIImageView *smallCropperWindow;
    IBOutlet UIImageView *imageViewForChosenImage;
    IBOutlet UIView *canvas;
    CGFloat _lastScale;
    CGFloat _lastRotation;
    CGFloat _firstX;
    CGFloat _firstY;
    CAShapeLayer *_marque;

}
@property BOOL newMedia;
- (IBAction)useCamera:(id)sender;
- (IBAction)useCameraRoll:(id)sender;
- (IBAction)crop:(id)sender;

@end

relevant .m -(void)crop:(id)sender{

smallCropperWindow.image=[imageViewForChosenImage.image croppedImage: (CGRect)smallCropperWindow.frame];

}

in UIImage+Resize.h

- (UIImage *)croppedImage:(CGRect)bounds;

in UIImage+Resize.m

- (UIImage *)croppedImage:(CGRect)bounds {
    CGFloat scale = MAX(self.scale, 1.0f);
    CGRect scaledBounds = CGRectMake(bounds.origin.x * scale, bounds.origin.y * scale, bounds.size.width * scale, bounds.size.height * scale);
    CGImageRef imageRef = CGImageCreateWithImageInRect([self CGImage], scaledBounds);
    UIImage *croppedImage = [UIImage imageWithCGImage:imageRef scale:self.scale orientation:UIImageOrientationUp];
    CGImageRelease(imageRef);
    return croppedImage;
}

Screenshot showing issue:

The small square in the middle should be filled with the babbie's face not a section of the floor from the full size image.

What am I doing wrong here?

Answer 1

Calculations you are doing seem incorrect. Try this,

1. First you have to make image aspect fit.
2. Then find the ratio heightRatio=image.size.height/imageView.frame.height;
3. Then find the ratio weidthRatio=image.size.width/imageView.frame.width;

Now instead of passing your smallCropperWindow.frame you have to do three things,

1. Translate center of small croppedWindow.Lots of calculation will go because aspect fit image will not start from origin of imageview.
2. Scale the width and height of your croppedWindow and pass this frame for cropping.