HowTo, iOS7, Objective-C Stuff, Programming

How To Take Square Photos using iOS7 and the UIImagePickerController

So everyone knows by now how to use the UIImagePickerController right? but did you also know that you could use that same controller to take square pictures, allowing the user to crop and scale before the image is saved? That sounds really cool, but how is this done you ask? Well, just follow the simple steps below or download the sample project and you should be well on your way.

Open Xcode and Create a new project by following the screen shots below:Screen Shot 2014-01-25 at 6.34.17 AM

Screen Shot 2014-01-25 at 6.34.41 AM


Screen Shot 2014-01-25 at 6.35.05 AM


You should now have a new project along with a list of files in the left column of Xcode. The 2 files that you will be working with throughout this tutorial will be ViewController.h and ViewController.m. So lets get started.

Click on ViewController.h and ensure that it looks as follows:

The only thing that has changed here from the original ViewController.h file is that we are going to implement the UIImagePickerController delegate methods. Next lets look at our ViewController.m file.

Click on ViewController.m and ensure that it looks as follows:

Ok so lets talk a bit about this code, we’ll go through it line by line starting with the properties in the interface.

The first line of code defines an outlet property for an Image View. This image view will need to be added to the ViewController within interface builder and a connection will need to be established. This view will be responsible for holding our cropped image when we are done with it. The second property is a Boolean variable that we will use to keep track of when the user dismisses the UIImagePickerController.

Next we added the viewDidAppear method which is called after the viewDidLoad method

First we check if the boolean didUserDismissCamera is YES, if it isn’t then we set it to YES and we call the loadCamera method which is the next method we will be adding. The only reason that the didUserDismissCamera boolean is even used is because we load the camera when the view appears. Well the view appears not just when the app launches but also when we dismiss the UIImagePickerController. If we didn’t have this boolean variable there to tell us if the user dismissed the UIImagePickerController it would just load right back up after being dismissed. Ok, moving right along to the loadCamera method.

First we create an instance of the UIImagePickerController and store it in a variable we named picker. We then tell the UIImagePickerController instance that we (as in the ViewController class) would like to be the delegate for this instance meaning that any delegate method calls performed by the UIImagePickerController will be handled here. The next line of code tells the UIImagePickerController instance that we want to allow the user to edit the photo after it is taken.

In the next line of code we are telling our Image Picker instance that we want to set the source type to be the camera. There are other source types we could be using here but for our purposes this will do.

Next we need to tell the instance what type of capture mode we will be using. The 2 choices here are photo or video, we will obviously be using the photo capture mode here.

The final line of code launches the Image Picker which then loads up the camera and allows us to take a picture. There are 2 final pieces to this code to make it all work together and these are the delegate methods we need to implement for the UIImagePickerController class to send us information about what is going on. Lets look at these a little closer.

We have 2 methods here. The first method is called from the UIImagePickerController instance when someone has taken a picture and tapped on the Use Photo button after they’ve made their scaling / cropping edits. This method then supplies us with an info dictionary that contains some useful information all of which you can find within the Apple documentation. I will only be covering one of the possible keys of this dictionary.

The first line of code assigns the EditedImage to the imageView that we created earlier in this tutorial by looking up the UIImagePickerControllerEditedImage key in the info dictionary. The second line of code dismisses the picker view controller.

The second method just lets us know that the user cancelled out of the picker. Maybe he/she decided that they did not want to take a picture. All we have to do here is dismiss the picker view controller.

Ok, we are all done with the code, now all that’s left is to create a connection within interface builder to the UIImageView and maybe to add a button to our ViewController that launches the UIImagePickerController should the user cancel and then decide they would like to take a picture. I will not be covering this within the tutorial but you can download a complete sample project by clicking on the file below.

Thanks for stopping by, if anyone needs any additional help or has any questions / suggestions feel free to comment.


The following two tabs change content below.
I've been in the Geek category for as long as I can remember. I am into anything technology and Sci-Fi related. I like tinkering with electronics as well as writing applications for Mac & iPhone.

3 thoughts on “How To Take Square Photos using iOS7 and the UIImagePickerController

  1. Sadly, the download link fails with the following error:

    /Volumes/Data 4/Websites/ must have to be writable!

Leave a Reply