lesmuc/AKImageCropperView

Responsive image cropper

AKImageCropper

Responsive image cropper

Image cropping plugin which supported different devices orientation. Easy to set up and configure. Has many settings for flexible integration into your project. Behavior is similar to native iOS photo cropper.

Features

• Overlay view & Crop rectangle full customization
• Flexible settings
• Image rotation
• Infinite "Zoom To Fit"
• Full image resolution
• Ability to draw custom crop rectangle

Requirements

• iOS 8.0+
• Xcode 7.3

Installation

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. To install AKImageCropperView with CocoaPods:

1. Make sure CocoaPods is installed.

2. Update your Podfile to include the following:

use_frameworks!
pod 'AKImageCropperView'

3. Run pod install.

4. In your code import AKImageCropperView like so: import AKImageCropperView

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To install AKImageCropperView with Carthage:

1. Install Carthage via Homebrew

   $ brew update
   $ brew install carthage

2. Add github "artemkrachulov/AKImageCropperView" to your Cartfile.

3. Run carthage update.

4. Drag AKMaskField.framework from the Carthage/Build/iOS/ directory to the Linked Frameworks and Libraries section of your Xcode project’s General settings.

5. Add $(SRCROOT)/Carthage/Build/iOS/AKImageCropperView.framework to Input Files of Run Script Phase for Carthage.

Manual

If you prefer not to use either of the aforementioned dependency managers, you can integrate AKImageCropperView into your project manually.

1. Download and drop AKImageCropperView folder in your project.
2. Done!

Usage example

Storyboard

@IBOutlet weak var cropView: AKImageCropperView!

override func viewDidLoad() {
    super.viewDidLoad()

    cropView.image = UIImage(named: "yourImage")
}

Programmatically

var cropView: AKImageCropperView!

override func viewDidLoad() {
    super.viewDidLoad()

    cropView = AKImageCropperView(frame: CGRect(x: 0, y: 20.0, width: 375.0, height: 607.0))
    cropView.image = UIImage(named: "yourImage")
    view.addSubview(cropViewProgrammatically)
}

Full examples with constraint, delegates and Overlay view configuration check in demo project.

NOTE: If after cropper view initialization your image has top inset. Go to storyboard with your scene and in the attributes inspector, uncheck 'Adjust Scrollview Insets'.

Initializing an Image Cropper View

func init(image: UIImage?)

Returns an image cropper view initialized with the specified image.

Parameters

• image : The initial image to display in the image cropper view.

Accessing the Displayed Images

var image: UIImage? { get set }

The image displayed in the image cropper view. Default value of this property is nil.

var croppedImage: UIImage? { get }

Cropperd image in the specified crop rectangle.

Instance Properties

var isEdited: UIImage? { get }

Returns the image edited state flag.

Managing the Delegate

weak var delegate: AKImageCropperViewDelegate? { get set }

The delegate of the cropper view object.

Delegate methods

optional func imageCropperViewDidChangeCropRect(view: AKImageCropperView, cropRect rect: CGRect)

Tells the delegate that crop frame was changed.

Parameters:

• view: The image cropper view.
• rect: New crop rectangle origin and size.

Customizing an Overlay View

var overlayView: AKImageCropperOverlayView? { get set }

Overlay view represented as AKImageCropperOverlayView open class.

Base configuration and behavior can be set or changed with AKImageCropperOverlayConfiguration structure. For deep visual changes create the children class and make the necessary configuration in the overrided methods.

Initializing an Overlay View

init(configuraiton: AKImageCropperOverlayConfiguration? = default)

Returns an overlay view initialized with the specified configuraiton.

Base configuration

var configuraiton: AKImageCropperOverlayConfiguration { get set }

Configuration structure for the Overlay View appearance and behavior.

AKImageCropperOverlayConfiguration

var zoomingToFitDelay: TimeInterval { get set }

Delay before the crop rectangle will scale to fit cropper view frame. Default value of this property is 2.

var animation: (duration: TimeInterval, options: UIViewAnimationOptions) { get set }

Animation options for layout transitions. Values:

• duration : The duration of the transition animation, measured in seconds. The default value is 300.
• options : Specifies the supported animation curves. The default value is .curveEaseInOut.

var cropRectInsets: UIEdgeInsets { get set }

Edges insets for crop rectangle. Static values for programmatically rotation. Default value of this property is 20 px for each edge.

var minCropRectSize: CGSize { get set }

The smallest value for the crop rectangle size. Default value of this property is 60 pixels width and 60 pixels height.

var cornerTouchSize: CGSize { get set }

Touch view where will be drawn the corner. Default value of this property is 30 pixels width and 30 pixels height.

var edgeThickness: (vertical: CGFloat, horizontal: CGFloat) { get set }

Thickness for edges touch area. This touch view is centered on the edge line.

• vertical : Thickness for vertical edges: Left, Right. The default value is 20.
• horizontal : Thickness for horizontal edges: Top, Bottom. The default value is .curveEaseInOut.

var edge: AKImageCropperCropViewConfigurationOverlay { get set }

Overlay visual configuration.

var edge: AKImageCropperCropViewConfigurationEdge { get set }

Edges visual configuration. Check this struct below.

var corner: AKImageCropperCropViewConfigurationCorner { get set }

Corners visual configuration. Check this struct below.

var grid: AKImageCropperCropViewConfigurationGrid { get set }

Grid visual configuration. Check this struct below.

AKImageCropperCropViewConfigurationOverlay

var backgroundColor: UIColor { get set }

The view’s background color. Default value is . black with alpha 0.5.

var isBlurEnabled: Bool { get set }

A Boolean value that determines whether the blur effect is enable. The blur effect added over overlay view. The effect will disappear before user interaction will start. After manipulations, the effect will revert to the initial state. Default value is true.

var blurStyle: Bool { get set }

The intensity of the blur effect. Default value is .dark.

var blurAlpha: Bool { get set }

The blur effect alpha value. Default value is 0.6.

AKImageCropperCropViewConfigurationEdge

var isHidden: Bool { get set }

A Boolean value that determines whether the edge view is hidden. Default value is false.

var normalLineWidth: CGFloat { get set }

Line width for normal edge state. Default value is 1.0.

var highlightedLineWidth: CGFloat { get set }

Line width for highlighted edge state. Default value is 3.0.

var normalLineColor: UIColor { get set }

Line color for normal edge state. Default value is .white.

var highlightedLineColor: UIColor { get set }

Line color for highlighted edge state. Default value is white.

AKImageCropperCropViewConfigurationCorner

var isHidden: Bool { get set }

A Boolean value that determines whether the corner view is hidden. Default value is false.

var normalLineWidth: CGFloat { get set }

Line width for normal corner state. Default value is 3.0.

var highlightedLineWidth: CGFloat { get set }

Line width for highlighted corner state. Default value is 3.0.

var normaSize: CGSize { get set }

Size for normal corner state. Default value is 20 pixels width and 20 pixels height.

var highlightedSize: CGSize { get set }

Size for highlighted corner state. Default value is 30 pixels width and 30 pixels height.

var normalLineColor: UIColor { get set }

Line color for normal corner state. Default value is .white.

var highlightedLineColor: UIColor { get set }

Line color for highlighted corner state. Default value is .white.

AKImageCropperCropViewConfigurationGrid

var isHidden: Bool { get set }

A Boolean value that determines whether the grid views is hidden. Default value is false.

var autoHideGrid: Bool { get set }

Hide grid after user interaction. Default value is true.

var linesCount: (vertical: Int, horizontal: Int) { get set }

The number of vertical and horizontal lines inside the crop rectangle.

• vertical : Vertical lines count. The default value is 2.
• horizontal : Horizontal lines count. The default value is 2.

var linesWidth: CGFloat { get set }

Vertical and horizontal lines width. Default value is 1.0.

var linesColor: UIColor { get set }

Vertical and horizontal lines color. Default value is white with alpha 0.5.

Visual Appearance

func layoutTopEdgeView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for top edge view in current user interaction state.

Parameters:

• view: Top edge view.
• touchView: Touch area view where added top edge view.
• state: User interaction state.

func layoutRightEdgeView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for right edge view in current user interaction state.

Parameters:

• view: Right edge view.
• touchView: Touch area view where added right edge view.
• state: User interaction state.

func layoutBottomEdgeView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for bottom edge view in current user interaction state.

Parameters:

• view: Bottom edge view.
• touchView: Touch area view where added bottom edge view.
• state: User interaction state.

func layoutLeftEdgeView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for left edge view in current user interaction state.

Parameters:

• view: Left edge view.
• touchView: Touch area view where added left edge view.
• state: User interaction state.

func layoutTopLeftCornerView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for top left corner view in current user interaction state. Drawing going with added shape layer.

Parameters:

• view: Top left corner view.
• touchView: Touch area view where added top left edge view.
• state : User interaction state.

func layoutTopRightCornerView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for top right corner view in current user interaction state. Drawing going with added shape layer.

Parameters:

• view: Top right corner view.
• touchView: Touch area view where added top right edge view.
• state : User interaction state.

func layoutBottomRightCornerView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for bottom right corner view in current user interaction state. Drawing going with added shape layer.

Parameters:

• view: Bottom right corner view.
• touchView: Touch area view where added bottom right edge view.
• state : User interaction state.

func layoutBottomLeftCornerView(_ view: UIView, inTouchView touchView: UIView, forState state: AKCropAreaPartState)

Visual representation for bottom left corner view in current user interaction state. Drawing going with added shape layer.

Parameters:

• view: Bottom left corner view.
• touchView: Touch area view where added bottom left edge view.
• state : User interaction state.

func layoutGridView(_ view: UIView, gridViewHorizontalLines: [UIView], gridViewVerticalLines: [UIView])

Visual representation for grid view.

Parameters:

• view: Grid view.
• gridViewHorizontalLines: Horizontal line view`s array.
• gridViewVerticalLines : Vertical line view`s array.

Contribute

Please do not forget to ★ this repository to increases its visibility and encourages others to contribute.

Got a bug fix, or a new feature? Create a pull request and go for it!

Meta

Artem Krachulov – www.artemkrachulov.com - artem.krachulov@gmail.com

Released under the MIT license

https://github.com/artemkrachulov