Crop a specific area of an UIImage from an UIImagePicker

Question

my heading is exploding with this issue.

I am want to implement something similar to the camera view of Instagram. I am using an Overlay View to customise the appearance of the camera.

First issue - I couldn't make the Live View a square. Therefore, I created views to cover parts of the live view and make a square.

This solution led to my second issue. How can I crop the image that appears in the square that I made on the overlay view.

My closest solution has come from this post: UIImage: Resize, then Crop

Is there a way to make a square shape live preview and the use that image. Or can I make a square from a portion of the scryeen that I want without distortion or lost of quality.

Regards

Answer 1

GPUImage is a great framework for processing live camera feeds. It can easily implement many visual effects, including cropping.

For example, to make a square video feed from the rectangular camera input:

GPUImageStillCamera *camera = [[GPUImageStillCamera alloc] initWithSessionPreset:AVCaptureSessionPreset1280x720 cameraPosition:AVCaptureDevicePositionBack];
camera.outputImageOrientation = UIInterfaceOrientationPortrait;

// 720 / 1280 = 0.5625
GPUImageCropFilter *squareCrop = [[GPUImageCropFilter alloc] initWithCropRegion:CGRectMake(0.0, 0.21875, 1.0, 0.5625)];

[camera addTarget:squareCrop];
[squareCrop addTarget:self.imageView];
[camera startCameraCapture];

You will need to read the GPUImage documentation to learn how to set up the framework properly, but it is quite powerful once you learn how to use it.