SSPhotoCropperViewController: A custom ViewController that provides UI for cropping photos in iOS apps
We all sometimes do something with photos in our apps. And apps that deal with photos in some way, whether it be editing, stylishing or sharing them, are becoming more and more popular every day.
In one of my apps I was recently working on, I needed a simple UI to crop a picture into a square shape. So I wrote SSPhotoCropperViewController. It’s a custom view controller that provides a simple, configurable and easy-to-use UI for cropping and scaling photos in iPhone & iPod Touch apps.
Add SSPhotoCropperViewController to Your Project
- Grab the source code from GitHub: https://github.com/ardalahmet/SSPhotoCropperViewController
- Copy “SSPhotoCropperDemo/SSPhotoCropper” folder contents into your project folder and add them to your project from Xcode.
Implement SSPhotoCropperDelegate
In the view controller that you will show SSPhotoCropperViewController, implement SSPhotoCropperDelegate methods to interact with SSPhotoCropperViewController.
Create and Show SSPhotoCropperViewController
- Create an SSPhotoCropperViewController object instance by using one of the -init methods provided, set the source photo, UI mode etc.
- Configure it by modifying some properties before showing the view controller.
- Show it by presenting it as a modal view controller or by pushing it on to a navigation controller.
Notes
- The demo project on GitHub includes a simple example on how to use SSPhotoCropperViewController. Have a look at it if you encounter a problem using SSPhotoCropperViewController in your project.
- Questions, suggestions, bug-reports, github forks & any other contributions are welcome. Don’t hesitate to contact me at @ardalahmet or via ardalahmet(at)gmail.com.
- The source code is licensed under the Apache License, Version 2.0. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
- You can modify the source code to make it meet your needs. You may want to change the crop square size or crop photos into rectangle shapes etc.
Screenshots
Photo Cropper
After Cropping the Photo
Hey Ardal
it was a very nice code. But there is one thing i want to ask
you set the size of image view to half CGRect imageViewFrame = CGRectMake(0.0f, 0.0f, roundf(w /2.0f), roundf(h / 2.0f)); in loadPhoto method.
and while croping there is
CGFloat cw = 300.0f / zoomScale;
CGFloat ch = 300.0f / zoomScale;
i can figure out how you calculated 300 number.
i want to show image on full screen i.e. 320 * 480 and so the size will be same as this. How will i achieve this.
thanks,
Hi @anil
What do you exactly want to display full screen? The image view or the scroll view that holds the image view?
Nothing should be changed other than the boundaries of the scroll view. And the code doesn’t depend on any constants related to the size of the scroll view, all scroll view related dimensions in the code are being freshly taken from the scroll view itself. You can just resize the scroll view in the IB and check whether it works fine or not. However if you want to change the size of the crop rectangle, then you’ll need to make some adjustments in the dragging and cropping code according to the new rectangle size. Hope this helps.
Very nice tutorial. My question is , can we set the dynamic size of the crop rectangle according to user touches so that user can select whatever image portion as per requirement? Thanks.
Hi @Richy
The user can zoom in and out the image to adjust the area of the image that she wants to crop. Making the crop rectangle fixed makes things simple, so I chose to design it so. However, you can always modify the code to make the crop rectangle resizable.
Thanks, hope this helps.
@Ahmet : Thanks for the quick reply. I will try this .
Hi Ahmet,
This is a wonderful tutorial! Would it be easy to change the shape of the crop from rectangle to an oval shape (closer to the shape of the human head)?
Hi @Matthew,
I’m not sure but I don’t think that it’s too easy to do cropping with an oval shape. I suppose, it requires some image processing.