Affine Transforms + Demo App

Question

I have a demo app here https://github.com/rdetert/image-transform-test

After importing an image, you can pinch, zoom, rotate the image. What I want to do is save out a 640x480 image (landscape mode) that looks identical to the live preview. So if there are 100px bars of empty space on the sides, I need the same empty bars in the final output (scaled appropriately).

This is proving to be more difficult than I thought it would be. I can't quite get it to come out right after days of working on it.

The magic method that generates the final image is called -(void)generateFinalImage

Good luck! ;)

EDIT

The green rectangle represents the actual area the imported image can be pinched, zoomed and rotated. The resolution on the iPhone 4S is 852x640, for example.

The blue rectangle is just a live preview for debugging and it's aspect ratio is the same as 640x480. The live preview could get very slow due to Core Image being very slow.

What I want to do is convert whatever is in the green rectangle to a 640x480 image. Notice the 852x640 is a slightly different aspect ratio than 640x480 too, but that isn't a huge problem.

Answer 1

Is your goal is to obtain just the exact copy of what you are editing, but with the size of the original image? I guess it could be obtained by something like this:

- (UIImage *)padImage:(UIImage *)img to:(CGSize)size
{
    if (size.width < img.size.width && size.height < img.size.height) return img;

    size.width = MAX(size.width, img.size.width);
    size.height = MAX(size.height, img.size.height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef context = CGBitmapContextCreate(NULL, size.width, size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);

    CGRect centeredRect = CGRectMake((size.width - img.size.width)/2.0, (size.height - img.size.height)/2.0, img.size.width, img.size.height);
    CGContextDrawImage(context, centeredRect, [img CGImage]);

    CGImageRef imageRef = CGBitmapContextCreateImage(context);

    CGColorSpaceRelease(colorSpace);
    CGContextRelease(context);

    UIImage *paddedImage = [UIImage imageWithCGImage:imageRef];
    CGImageRelease(imageRef);
    return paddedImage;
}

// final image size must be 640x480
- (void)generateFinalImage
{
    float rotatableCanvasWidth = 495.0;
    float rotatableCanvasHeight = 320.0;
    UIImage *tmp = self.importedRawImage;

    CGSize size = self.importedRawImage.size;
    NSLog(NSStringFromCGSize(size));

    tmp = [self padImage:tmp to:CGSizeMake(rotatableCanvasWidth, rotatableCanvasHeight)];
    CIImage *ciImage = [[CIImage alloc] initWithImage:[tmp imageWithTransform:self.importedImageView.transform]];

    CGPoint center = CGPointMake(size.width / 2.0, size.height / 2.0);

    CIContext *context = [CIContext contextWithOptions:nil];
    CGRect r = ciImage.extent;
    r.origin.x = (r.size.width - rotatableCanvasHeight) / 2.0;
    r.origin.y = (r.size.height - rotatableCanvasWidth) / 2.0;
    r.size.width = rotatableCanvasHeight;
    r.size.height = rotatableCanvasWidth;
    self.finalImage = [UIImage imageWithCGImage:[context createCGImage:ciImage fromRect:r] scale:1.0 orientation:UIImageOrientationUp];

    self.finalImage = [self.finalImage resizedImage:CGSizeMake(100.0f, 134.0f) interpolationQuality:kCGInterpolationHigh];

    self.previewImageView.image = self.finalImage;
}