SwiftyCrop

On iOS 26, visionOS 26, or macOS 26, SwiftyCrop automatically adopts the Liquid Glass design, which uses icon buttons instead of text buttons.

Button Foreground Colors

SwiftyCropConfiguration.Colors foreground keys (cancelButton, rotateButton, resetRotationButton, saveButton) apply to all OS versions. In Liquid Glass, these color the button icons.

Button Background Colors

Matching ...Background keys (e.g., cancelButtonBackground) only affect Liquid Glass by tinting the glass background of the button.

• A .clear background (the default for most buttons) maintains a plain, untinted glass look.
• On iOS, buttons with a non-.clear background use a prominent glass style that automatically picks a contrasting icon color; in these cases, the foreground color has no effect.

Design Best Practices

The toolbar is transparent. To ensure visibility, pick colors that contrast with your chosen background and avoid system-dependent colors like .primary, which may flip with appearance settings while your background does not.

To display the cropping interface, use SwiftyCropView. You typically present it in a .fullScreenCover or a sheet after an image has been selected. The view requires the imageToCrop and a maskShape. It provides a trailing closure that returns the final croppedImage.

import SwiftUI
import SwiftyCrop

struct ExampleView: View {
    @State private var showImageCropper: Bool = false
    @State private var selectedImage: UIImage?

    var body: some View {
        VStack {
             Button("Crop downloaded image") {
                Task {
                    selectedImage = await downloadExampleImage()
                    showImageCropper.toggle()
                }
             }
        }
        .fullScreenCover(isPresented: $showImageCropper) {
            if let selectedImage = selectedImage {
                SwiftyCropView(
                    imageToCrop: selectedImage,
                    maskShape: .square
                ) { croppedImage in
                    // Do something with the returned, cropped image
                }
            }
        }
    }

    private func downloadExampleImage() async -> UIImage? {
        // ... implementation ...
    }
}

You can customize the behavior, appearance, and interaction of the cropper using SwiftyCropConfiguration. This includes settings for magnification, mask radius, rotation, zoom sensitivity, and custom text, fonts, and colors.

let configuration = SwiftyCropConfiguration(
    maxMagnificationScale: 4.0,
    maskRadius: 130,
    cropImageCircular: false,
    rotateImage: false,
    rotateImageWithButtons: false,
    showsZoomSlider: false,
    zoomSensitivity: 1.0,
    rectAspectRatio: 4/3,
    showsProgressLayer: true,
    progressLayerDelay: .milliseconds(200),
    texts: SwiftyCropConfiguration.Texts(
        cancelButton: "Cancel",
        interactionInstructions: "Custom instruction text",
        saveButton: "Save",
        zoomSliderLabel: "Zoom"
    ),
    fonts: SwiftyCropConfiguration.Fonts(
        cancelButton: Font.system(size: 12),
        interactionInstructions: Font.system(size: 14),
        saveButton: Font.system(size: 12)
    ),
    colors: SwiftyCropConfiguration.Colors(
        cancelButton: Color.red,
        interactionInstructions: Color.white,
        saveButton: Color.blue,
        saveButtonBackground: Color.yellow,
        background: Color.gray,
        zoomSlider: Color.white
    )
)

// Usage
SwiftyCropView(
    imageToCrop: selectedImage,
    maskShape: .square,
    configuration: configuration
) { croppedImage in
    // ...
}

The following properties are available in SwiftyCropConfiguration to customize the cropping experience:

| Property | Type | Description |
| ----------- | ----------- | ----------- |
| `maxMagnificationScale` | `CGFloat` | Maximum scale factor for magnification. Defaults to `4.0`. |
| `maskRadius` | `CGFloat` | Radius of the mask. Defaults to `130`. |
| `cropImageCircular` | `Bool` | If `true`, the resulting image is masked as a circle when using `.circle` mask. Defaults to `false`. |
| `rotateImage` | `Bool` | Enables rotation via pinch gestures. Defaults to `false`. |
| `rotateImageWithButtons` | `Bool` | Shows rotation buttons. Defaults to `false`. |
| `showsZoomSlider` | `Bool` | Shows a zoom slider for non-pinch devices. Defaults to `false`. |
| `zoomSensitivity` | `CGFloat` | Zoom speed. Defaults to `1.0`. |
| `rectAspectRatio` | `CGFloat` | Aspect ratio for `.rectangle` mask. Defaults to `4:3`. |
| `allowAspectRatioResizing` | `Bool` | Allows free resizing of aspect ratio for `.rectangle` mask. Defaults to `false`. |
| `minAspectRatio` | `CGFloat` | Minimum aspect ratio (width/height) when resizing is enabled. Defaults to `0.1`. |
| `maxAspectRatio` | `CGFloat` | Maximum aspect ratio (width/height) when resizing is enabled. Defaults to `10.0`. |
| `dismissesOnCompletion` | `Bool` | If `true`, view dismisses itself after save/cancel. Defaults to `true`. |
| `showsProgressLayer` | `Bool` | Shows progress layer during generation. Defaults to `true`. |
| `progressLayerDelay` | `Duration` | Delay before showing progress layer. Defaults to `.zero`. |
| `texts` | `Texts` | Custom button and instruction text. |
| `fonts` | `Fonts` | Custom fonts for UI elements. |
| `colors` | `Colors` | Custom colors for UI elements. |