Crop an Image in SwiftUI

Written by Team Kodeco

Sometimes you might want to display only a portion of an image instead of the entire image. Fortunately, SwiftUI makes it easy to crop an image using the clipped modifier.

In this example, you have an image of a small dog outside in the snow but there’s lots of landscape around her. You want to focus in more tightly on the pup.

Start by adding an Image view with the image as its source. Then, apply the clipped modifier to the Image view and set its frame to the desired dimensions of the cropped image. Finally, you add a border around our image using the border modifier, just for visual clarity.

Here’s the implementation:

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Cropping With Clipped")
        .font(.title)
      Image("WinterPup") // Load the image
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200) // Set the frame size
        .clipped() // Crop the image to the frame size
        .border(.black, width: 2) // Add a border for visual clarity
    }
  }
}

The preview should look as follows:

This code does the following:

• Text("Cropping With Clipped") creates a Text view and .font(.title) sets its font to the built-in .title style.
• Image("WinterPup") creates an image view with an image named WinterPup.
• .resizable() makes the image resizable, which means it can be scaled up or down to fit its frame.
• .scaledToFill() scales the image to fill its frame while preserving its aspect ratio. If the aspect ratios of the image and its frame are different, parts of the image will extend beyond the frame.
• .frame(width: 200, height: 200)sets the size of the Image view’s frame to 200 points by 200 points.
• .clipped() crops any content that extends beyond the view’s bounds. In this case, it’s cropping any part of the image that extends beyond the 200x200 frame.
• .border(.black, width: 2) adds a two-point black border around the Image view.

In this example, you used scaledToFill to ensure that the image fills the frame with its aspect ratio preserved. If you want instead to scale the image to fit within its parent view or bounding rectangle while maintaining the image’s aspect ratio, use scaleToFit instead. This means that the whole image will be visible, but there may be empty space on one or two sides (for instance, if the aspect ratios of the image and the view do not match).

Overall, cropping an image in SwiftUI is simple thanks to the clipped modifier. With just a few lines of code, you can easily customize your images to fit your user interface needs.