Home > iOS Development > SSPhotoCropperViewController: A custom ViewController that provides UI for cropping photos in iOS apps

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

 

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

Photo Cropper

After Cropping the Photo

After Cropping the Photo

  1. anil
    November 16th, 2011 at 12:44 | #1

    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,

  2. November 20th, 2011 at 22:56 | #2

    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.

  3. Richy
    December 6th, 2011 at 16:51 | #3

    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.

  4. December 6th, 2011 at 20:08 | #4

    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.

  5. Richy
    December 7th, 2011 at 09:58 | #5

    @Ahmet : Thanks for the quick reply. I will try this .

  6. Matthew Walk
    February 9th, 2012 at 08:17 | #6

    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)?

  7. February 10th, 2012 at 11:32 | #7

    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.

  8. Dip
    April 23rd, 2012 at 05:55 | #8

    @Ahmet Ardal Can you please let me know why you have used 300 hard coded? I am trying to get image which is similar to size of the cropRectangleButton. e.g. i want to develop crop functionality similar iPhone default crop function but with different size.

  9. April 23rd, 2012 at 16:00 | #9

    Hi @Dip ,

    I used hard-coded crop rectangle size because it was what I need in my app at the time. Then I open-sourced the code AS IS.
    By the way, it’s not too difficult to adapt it to different crop rectangle sizes.

  10. CungTien
    May 14th, 2012 at 09:13 | #10

    Hi Ahmet Ardal,
    I’m new ios :D .
    This tut is great, so i’m try change to crop image with size 320×480:
    /*frame crop button*/
    cropLocalButton.frame = CGRectMake(5, 10, 160 , 240);
    /**/
    CGFloat cw = 320.0f / zoomScale;
    CGFloat ch = 480.0f / zoomScale;
    /**/
    But not work exactly, :(
    Can you caculator size to app crop size 320X480 ?
    Thank.

  11. sravan
    January 8th, 2013 at 23:34 | #11

    sravan :
    it shows the error that is “_OBJC_CLASS_$_SSPhotoCropperViewController”, referenced from:
    objc-class-ref in AddLeadsViewController.o
    ld: symbol(s) not found for architecture i386
    clang: error: linker command failed with exit code 1 (use -v to see invocation)

    what is the solution please suggest me

  12. January 9th, 2013 at 12:58 | #12

    Hi @sravan ,
    It seems that the linker cannot find SSPhotoCropperViewController object. Please make sure you properly added SSPhotoCropperViewController.m, SSPhotoCropperViewController.h and SSPhotoCropperViewController.xib files to your project and target.

  13. Danny
    February 24th, 2013 at 14:26 | #13

    Hi I had to make create my own view controller since I am using storyboards so I cant use the xib file. Anyway the green cropping square can’t be seen for me. It is behind the imageview. Any idea how to make it so it shows?

  14. hugocarlmartin
    March 26th, 2013 at 21:29 | #14

    Awesome tutorial. Do you have the sameone for storyboard? I can’t get it to work.

  1. October 21st, 2011 at 11:44 | #1
  2. October 24th, 2011 at 04:19 | #2
  3. January 10th, 2012 at 10:36 | #3
  4. May 30th, 2012 at 03:17 | #4
  5. September 20th, 2012 at 10:55 | #5
  6. June 7th, 2013 at 12:09 | #6