Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Crop your images easily using SwiftUI

License

NotificationsYou must be signed in to change notification settings

benedom/SwiftyCrop

Repository files navigation

BuildStatic BadgeStatic BadgeStatic BadgeStatic BadgeStatic BadgeLicense - MIT

SwiftyCrop example usage

Circle Mask ShapeSquare Mask ShapeLiquid Glass UI

🔭 Overview

SwiftyCrop allows users to seamlessly crop images within their SwiftUI applications. It provides a user-friendly interface that makes cropping an image as simple as selecting the desired area.

With SwiftyCrop, you can easily adjust the cropping area, maintain aspect ratio, zoom in and out for precise cropping. You can also specify the cropping mask to be a square, circle or rectangle with custom aspect ratio. SwiftyCrop is highly customizable, you can adjust texts, fonts and colors that are used.

The following languages are supported & localized:

  • 🇬🇧 English
  • 🇩🇪 German
  • 🇫🇷 French
  • 🇮🇹 Italian
  • 🇷🇺 Russian
  • 🇪🇸 Spanish
  • 🇹🇷 Turkish
  • 🇺🇦 Ukrainian
  • 🇭🇺 Hungarian
  • 🇧🇷 Brazilian Portuguese
  • 🇰🇷 Korean
  • 🇯🇵 Japanese
  • 🇨🇳 Chinese

The localization file can be found inSources/SwiftyCrop/Resources.

📕 Contents

🧳 Requirements

  • iOS 16.0 or later
  • Xcode 15.0 or later
  • Swift 5.9 or later

💻 Installation

There are two ways to use SwiftyCrop in your project:

  • using Swift Package Manager
  • manual install (embed Xcode Project)

Swift Package Manager

TheSwift Package Manager is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

To integrateSwiftyCrop into your Xcode project using Xcode 15.0 or later, specify it inFile > Swift Packages > Add Package Dependency...:

https://github.com/benedom/SwiftyCrop

Manually

If you prefer not to use any of dependency managers, you can integrateSwiftyCrop into your project manually. PutSources/SwiftyCrop folder in your Xcode project. Make sure to enableCopy items if needed andCreate groups.

📱 Demo App

To get a feeling howSwiftyCropView works you can run the demo app (thanks to@leoz).

🛠️ Usage

Quick Start

This example shows how to displaySwiftyCropView in a full screen cover after an image has been set.

import SwiftUIimport SwiftyCropstructExampleView:View{@StateprivatevarshowImageCropper:Bool=false@StateprivatevarselectedImage:UIImage?varbody:someView{VStack{            /*            Update `selectedImage` with the image you want to crop,            e.g. after picking it from the library or downloading it.            As soon as you have done this, toggle `showImageCropper`.                        Below is a sample implementation:             */Button("Crop downloaded image"){Task{                    selectedImage=awaitdownloadExampleImage()                    showImageCropper.toggle()}}}.fullScreenCover(isPresented: $showImageCropper){iflet selectedImage= selectedImage{SwiftyCropView(                    imageToCrop: selectedImage,                    maskShape:.square){ croppedImagein                    // Do something with the returned, cropped image}}}}    // Example function for downloading an imageprivatefunc downloadExampleImage()async->UIImage?{leturlString="https://picsum.photos/1000/1200"guardlet url=URL(string: urlString),let(data, _)=try?awaitURLSession.shared.data(from: url),let image=UIImage(data: data)else{returnnil}return image}}

‼️ NOTE‼️

If you want to display `SwiftyCrop` inside a sheet, use `NavigationView` instead of `NavigationStack` in case you want to wrap it.

SwiftyCrop supports three different mask shapes for cropping:

  • circle
  • square
  • rectangle

This is only the shape of the mask the user will see when cropping the image. The resulting, cropped image will always be a square by default when usingcircle orsquare. To get a circular cropped image, you can override this using a configuration.

You can also configureSwiftyCropView by passing aSwiftyCropConfiguration. A configuration has the following properties:

PropertyDescription
maxMagnificationScaleCGFloat: The maximum scale factor that the image can be magnified while cropping. Defaults to4.0.
maskRadiusCGFloat: The radius of the mask used for cropping. Defaults to130. A good way is to make it dependend on the screens size.
cropImageCircularBool: When using the cropping maskcircle, whether the resulting image should also be masked as circle. Defaults tofalse.
rotateImageBool: Whether the image can be rotated when cropping using pinch gestures. Defaults tofalse.
rotateImageWithButtonsBool: Option to show rotation buttons for rotating. Defaults tofalse.
usesLiquidGlassDesignBool: (Beta) apply the all new liquid glass design. Defaults tofalse. This might be changed in the future.
zoomSensitivityCGFloat: Zoom sensitivity when cropping. Increase to make zoom faster / less sensitive. Defaults to1.0.
rectAspectRatioCGFloat: The aspect ratio to use when a rectangular mask shape is used. Defaults to4:3.
textsTexts: Defines custom texts for the buttons and instructions. Defaults to using localized strings from resources.
fontsFonts: Defines custom fonts for the buttons and instructions. Defaults to using system font.
colorsColors: Defines custom colors for the texts and background. Defaults to white text and black background.

Create a configuration like this:

letconfiguration=SwiftyCropConfiguration(    maxMagnificationScale:4.0,    maskRadius:130,    cropImageCircular:false,    rotateImage:false,    rotateImageWithButtons:false,    usesLiquidGlassDesign:false,    zoomSensitivity:1.0,    rectAspectRatio:4/3,    texts:SwiftyCropConfiguration.Texts(        cancelButton:"Cancel",        interactionInstructions:"Custom instruction text",        saveButton:"Save"),    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,        background:Color.gray))

and use it like this:

.fullScreenCover(isPresented: $showImageCropper){iflet selectedImage= selectedImage{SwiftyCropView(                    imageToCrop: selectedImage,                    maskShape:.square,                    // Use the configuration                    configuration: configuration){ croppedImagein                    // Do something with the returned, cropped image}}}

🪟 iOS 26 & Liquid Glass

To adopt to the new Liquid Glass design Apple introduced with iOS 26, SwiftyCrop supplies a new UI which reflects this design. This will remove text buttons and replace them with icon buttons and much more. Below is the current way it looks. Try it for yourself by enabling it in the configuration!

‼️ NOTE‼️This feature is currently in beta and might change, due to iOS 26 still being in beta and Apple changing design elements. This can only be used on iOS 26 and Xcode 26.

👨‍💻 Contributors

All issue reports, feature requests, pull requests and GitHub stars are welcomed and much appreciated.

Thanks to@leoz for adding the circular crop mode, the demo app and the rotation functionality 🎉

Thanks to@kevin-hv for adding the hungarian localization 🇭🇺

Thanks to@Festanny for helping with the recangular cropping functionality 🎉

Thanks to@lipej for adding the brazilian portugese localization 🇧🇷🇵🇹

Thanks to@insub for adding the korean localization 🇰🇷

Thanks to@yhirano for adding the japanese localization 🇯🇵

Thanks to@yefimtsev for adding the ability to customize fonts and colors 🖼️

Thanks to@SuperY for adding the chinese localization 🇨🇳

Thanks to@mosliem for adding the cropping in background thread 🧵

Thanks to@krayc425 for adding visionOS support 🕶️

📃 License

SwiftyCrop is available under the MIT license. See theLICENSE file for more info.

Contributors11

Languages


[8]ページ先頭

©2009-2025 Movatter.jp