SwiftyCrop - SwiftUI

Build Static Badge Static Badge Static Badge License - MIT

🔭 概述

SwiftyCrop 允许用户在其 SwiftUI 应用程序中无缝裁剪图像。它提供了一个用户友好的界面,使裁剪图像就像选择所需的区域一样简单。

使用 SwiftyCrop,您可以轻松调整裁剪区域,保持宽高比,以及放大和缩小以进行精确裁剪。您还可以指定裁剪蒙版为正方形或圆形。

支持并本地化以下语言:

本地化文件可以在 Sources/SwiftyCrop/Resources 中找到。

📕 目录

🧳 要求

💻 安装

有两种方法可以在您的项目中使用 SwiftyCrop

Swift Package Manager

Swift Package Manager 是一个用于管理 Swift 代码分发的工具。 它与 Swift 构建系统集成,以自动化下载、编译和链接依赖项的过程。

要使用 Xcode 15.0 或更高版本将 SwiftyCrop 集成到您的 Xcode 项目中,请在 File > Swift Packages > Add Package Dependency... 中指定它。

https://github.com/benedom/SwiftyCrop

手动

如果您不想使用任何依赖管理工具,您可以手动将 SwiftyCrop 集成到您的项目中。将 Sources/SwiftyCrop 文件夹放入您的 Xcode 项目中。 确保启用 Copy items if neededCreate groups

📱 演示应用

要了解 SwiftyCropView 的工作原理,您可以运行演示应用程序(感谢 @leoz)。

🛠️ 用法

快速入门

此示例显示了在设置图像后如何在全屏覆盖中显示 SwiftyCropView

import SwiftUI
import SwiftyCrop

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

    var body: some View {
        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 = 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
                }
            }
        }
    }

    // Example function for downloading an image
    private func downloadExampleImage() async -> UIImage? {
        let urlString = "https://picsum.photos/1000/1200"
        guard let url = URL(string: urlString),
              let (data, _) = try? await URLSession.shared.data(from: url),
              let image = UIImage(data: data)
        else { return nil }

        return image
    }
}

‼️注意‼️

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

SwiftyCrop 支持两种不同的裁剪蒙版形状

这仅仅是用户在裁剪图像时看到的蒙版的形状。 默认情况下,当使用 circlesquare 时,生成的裁剪图像始终为正方形。 要获得圆形裁剪图像,您可以覆盖此设置。

您还可以通过传递 SwiftyCropConfiguration 来配置 SwiftyCropView。 配置具有以下属性

属性 描述
maxMagnificationScale CGFloat:裁剪时图像可以放大的最大缩放因子。 默认为 4.0
maskRadius CGFloat:用于裁剪的蒙版的半径。 默认为 130。 一个好方法是使其取决于屏幕尺寸。
cropImageCircular Bool:当使用裁剪蒙版 circle 时,是否也应将生成的图像蒙版为圆形。 默认为 false
rotateImage Bool:在使用捏合手势裁剪时是否可以旋转图像。 默认为 false
zoomSensitivity CGFloat:裁剪时的缩放灵敏度。 增加以使缩放更快/不太敏感。 默认为 1.0
rectAspectRatio CGFloat:使用矩形蒙版形状时要使用的宽高比。 默认为 4:3
texts Texts:定义按钮和说明的自定义文本。 默认为使用来自资源的本地化字符串。
fonts Fonts:定义按钮和说明的自定义字体。 默认为使用系统字体。
colors Colors:定义文本和背景的自定义颜色。 默认为白色文本和黑色背景。

像这样创建一个配置

let configuration = SwiftyCropConfiguration(
    maxMagnificationScale: 4.0,
    maskRadius: 130,
    cropImageCircular: false,
    rotateImage: true,
    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
    )
)

并像这样使用它

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

👨‍💻 贡献者

欢迎并感谢所有问题报告、功能请求、拉取请求和 GitHub 星星。

感谢 @leoz 添加圆形裁剪模式、演示应用和旋转功能🎉

感谢 @kevin-hv 添加匈牙利语本地化🇭🇺

感谢 @Festanny 帮助实现矩形裁剪功能 🎉

感谢 @lipej 添加巴西葡萄牙语本地化🇧🇷🇵🇹

感谢 @insub 添加韩语本地化🇰🇷

感谢 @yhirano 添加日语本地化🇯🇵

感谢 @yefimtsev 添加自定义字体和颜色的功能 🖼️

感谢 @SuperY 添加中文本地化🇨🇳

✍️ 作者

Benedikt Betz

📃 许可证

SwiftyCrop 在 MIT 许可证下可用。 有关更多信息,请参阅 LICENSE 文件。