How do I capture a zoomed UIImageView inside of a Scrollview to crop?

Question

Problem: Cropping with the image zoomed out is fine. Cropping with the image zoomed in is showing the image above what is should be. The yOffset I have in there is because the crop square I want starts below where the scrollview does.

Code:

CGRect rect;
float yOffset = 84;
rect.origin.x = floorf([scrollView contentOffset].x * zoomScale);
rect.origin.y = floorf(([scrollView contentOffset].y + yOffset) * zoomScale);
rect.size.width = floorf([scrollView bounds].size.width * zoomScale);
rect.size.height = floorf((320 * zoomScale));

if (rect.size.width > 320) {
    rect.size.width = 320;
}

if (rect.size.height > 320) {
    rect.size.height = 320;
}

CGImageRef cr = CGImageCreateWithImageInRect([[imageView image] CGImage], rect);

UIImage *img = imageView.image; //[UIImage imageWithCGImage:cr];

UIGraphicsBeginImageContext(rect.size);

// translated rectangle for drawing sub image
CGRect drawRect = CGRectMake(-rect.origin.x, -rect.origin.y, 320.0f, 320.0f);
NSLog(@"drawRect: %@", NSStringFromCGRect(drawRect));
NSLog(@"rect: %@", NSStringFromCGRect(rect));

// draw image
[img drawInRect:drawRect];

// grab image
UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

CGImageRelease(cr);

[self.delegate imageCropper:self didFinishCroppingWithImage:cropped];

What am I doing that is causing the image to get the wrong height when zooming?

Answer 1

UIImage* imageFromView(UIImage* srcImage, CGRect* rect)
{
    CGImageRef cr = CGImageCreateWithImageInRect(srcImage.CGImage, *rect);
    UIImage* cropped = [UIImage imageWithCGImage:cr];

    CGImageRelease(cr);
    return cropped;
}
-(void) doneEditing
{
    //Calculate the required area from the scrollview
    CGRect visibleRect;
    float scale = 1.0f/scrollView.zoomScale;
    visibleRect.origin.x = scrollView.contentOffset.x * scale;
    visibleRect.origin.y = scrollView.contentOffset.y * scale;
    visibleRect.size.width = scrollView.bounds.size.width * scale;
    visibleRect.size.height = scrollView.bounds.size.height * scale;


    FinalOutputView* outputView = [[FinalOutputView alloc] initWithNibName:@"FinalOutputView" bundle:[NSBundle mainBundle]];
    outputView.image = imageFromView(imageView.image, &visibleRect);

    [self.navigationController pushViewController:outputView animated:YES];
    [outputView release];
}

Loading Orginal Image:

Zooming Image:

Finally Capturing the Image

Answer 2

If you want to take screenshot from the whole view of scrollView (after zooming) you can do this:

UIImage* image = nil;
UIGraphicsBeginImageContext(self.scrollView.contentSize);
{
    //save previous frames
    CGPoint savedContentOffset = self.scrollView.contentOffset;
    CGRect savedFrame = self.scrollView.frame;
    CGRect imgFrame  = self.imageView.frame;

    //set the frames with current content size
    self.scrollView.contentOffset = CGPointZero;
    self.scrollView.frame = CGRectMake(0, 0, self.scrollView.contentSize.width, self.scrollView.contentSize.height);
    self.imageView.frame = self.scrollView.frame;

    //render image now :)
    [self.scrollView.layer renderInContext: UIGraphicsGetCurrentContext()];
    image = UIGraphicsGetImageFromCurrentImageContext();

    //now set the frames again with old ones :)
    self.scrollView.contentOffset = savedContentOffset;
    self.scrollView.frame = savedFrame;
    self.imageView.frame = imgFrame;
    [self viewForZoomingInScrollView:self.scrollView];
}
UIGraphicsEndImageContext();

//get the documents path
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
//save file as savedImage.png
NSString *savedImagePath = [documentsDirectory stringByAppendingPathComponent:@"savedImage.png"];

//get the png data from image
NSData *imageData = UIImagePNGRepresentation(image);
//write it now
[imageData writeToFile:savedImagePath atomically:NO];