How to Cropping Image In Swift – iOS Examples

Overview Of Cropping Image :-

In this blog, we are going to implement of “Cropping Image”

Crop an image Using specific aspect ratio

This tutorial on following steps so that it will be easy for you to understand.

  1. A Image Zoom and Scrolling.
  2. Calculate the frame of image inside the image view (UIImageView).
  3. Calculate the frame of crop area with respect ratio of the actual image size.
  4. Image to Cropping.

Create a Image Zoom and Scroll

First start, creating a ViewController. Go to your storyboard file and drag a new UIViewController from the Object Library on the top right corner of XCode.

Now drag a ScrollView on ViewController and adjust the frames of ScrollView to the edge of ViewController and drag a ImageView under the ScrollView and adjust the frame of ImageView to the edge of ScrollView.

To add all the missing constraints, simply go the bottom right corner of the storyboard and click on Add Missing Constraints to All Views.

How to Cropping Image In Swift - iOS Examples

You can set an image on ImageView from ImageAsset. However, in the future, you may want to retrieve an image from the camera, photo library, or another source and set it to ImageView instead. Additionally, make sure to set the content mode to Aspect Fit for proper display.

minimum zoom scale and maximum zoom scale of scrollview.

Begin by creating outlets for ScrollView and ImageView, and then set the delegate, minimum zoom scale, and maximum zoom scale of the ScrollView.

class ImageCropperViewController: UIViewController,UIScrollViewDelegate {
     @IBOutlet var scrollView: UIScrollView!{
               scrollView.delegate = self
               scrollView.minimumZoomScale = 1.0
               scrollView.maximumZoomScale = 10.0
     @IBOutlet var imageView: UIImageView!

Finally, it’s necessary to implement a UIScrollViewDelegate function that will return the view to be scaled. In this case, we should return the ImageView.

func viewForZooming(in scrollView: UIScrollView) -> UIView? {
     return imageView

Calculate the frame of image inside the image view (UIImageView).

If the content mode of the ImageView is set to Aspect Fit, the image may not fill all the available space of the ImageView, resulting in the frame of the image being unequal to its bounds. To address this issue, we can create an extension of the UIImageView class and write a function that calculates the frame of the image within the ImageView.

extension UIImageView{
   func imageFrame()->CGRect{
     let imageViewSize = self.frame.size
     guard let imageSize = self.image?.size else{return}
     let imageRatio = imageSize.width / imageSize.height
     let imageViewRatio = imageViewSize.width / imageViewSize.height
     if imageRatio < imageViewRatio {
        let scaleFactor = imageViewSize.height / imageSize.height
        let width = imageSize.width * scaleFactor
        let topLeftX = (imageViewSize.width - width) * 0.5
        return CGRect(x: topLeftX, y: 0, width: width, height: imageViewSize.height)
        let scalFactor = imageViewSize.width / imageSize.width
        let height = imageSize.height * scalFactor
        let topLeftY = (imageViewSize.height - height) * 0.5
        return CGRect(x: 0, y: topLeftY, width: imageViewSize.width, height: height)

Calculate the frame of crop area with respect ratio of the actual image size.

To define a cropping area, we can create another view in our ViewController and place it on the same hierarchy level as ScrollView. You can choose to make the whole screen or a specific area the cropping area.

To define the cropping area, add constraints such as Leading, Trailing, Vertically Center, and Aspect Ratio to the View. The constraints can be adjusted based on your specific requirements. In this case, we have set the Leading, Trailing, and Vertically Center constants to 0 and the aspect ratio constant to 16:9. Additionally, decrease the alpha value of the View so that the user can see through it.

crop area with respect ratio of the actual image size

If you run the application and check, you will notice that you cannot zoom through the View we just placed to define the crop area. To overcome this issue, we can create a custom UIView that will pass the touch to the view underneath.

class CropAreaView: UIView {
     override func point(inside point: CGPoint, with event:   UIEvent?) -> Bool {
          return false

To use the custom UIView we just created, set the class of the View in the Storyboard to the custom class.

Once we have successfully defined the crop area on the screen, we need to map that area to the actual image.

First, create a outlet of the View.

@IBOutlet var cropAreaView: CropAreaView!

To accomplish this, we need to define a computed variable that returns the frame of the cropping area with respect to the actual image.

var cropArea:CGRect{
          let factor = imageView.image!.size.width/view.frame.width
          let scale = 1/scrollView.zoomScale
          let imageFrame = imageView.imageFrame()
          let x = (scrollView.contentOffset.x + cropAreaView.frame.origin.x - imageFrame.origin.x) * scale * factor
          let y = (scrollView.contentOffset.y + cropAreaView.frame.origin.y - imageFrame.origin.y) * scale * factor
          let width = cropAreaView.frame.size.width * scale * factor
          let height = cropAreaView.frame.size.height * scale * factor
          return CGRect(x: x, y: y, width: width, height: height)

Image to Cropping

Adding a button to trigger the cropping process is the easiest task among all the tasks we have accomplished so far. Simply drag a button onto the ViewController and ensure that the button is placed on the same hierarchy level as ScrollView and CropView. Additionally, add the Bottom Space and Horizontally Center constraints to the button.

Image to Cropping

finally create action of the button and crop the image.

@IBAction func crop(_ sender: UIButton) {
     let croppedCGImage = imageView.image?.cgImage?.cropping(to: cropArea)
     let croppedImage = UIImage(cgImage: croppedCGImage!)
     imageView.image = croppedImage

If you run the application and crop the image, the image will be cropped successfully. However, there is one issue: the cropped image will be displayed with the previous zoom level. To fix this issue, we need to reset the zoom level of the ScrollView.

scrollView.zoomScale = 1



Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *