Git Product home page Git Product logo

rskimagecropper's Introduction

RSKImageCropper Build Status Coverage Status Carthage compatible

Sample

An image cropper for iOS like in the Contacts app with support for landscape orientation.

Installation

RSKImageCropper requires iOS 6.0 or later.

Using CocoaPods

  1. Add the pod RSKImageCropper to your Podfile.

    pod 'RSKImageCropper'
    
  2. Run pod install from Terminal, then open your app's .xcworkspace file to launch Xcode.

  3. Import the RSKImageCropper.h header. Typically, this should be written as #import <RSKImageCropper/RSKImageCropper.h>

Using Carthage

  1. Add the ruslanskorb/RSKImageCropper project to your Cartfile.

    github "ruslanskorb/RSKImageCropper"
    
  2. Run carthage update, then follow the additional steps required to add the iOS and/or Mac frameworks into your project.

  3. Import the RSKImageCropper framework/module.

    • Using Modules: @import RSKImageCropper
    • Without Modules: #import <RSKImageCroper/RSKImageCropper.h>

Basic Usage

Import the class header.

#import "RSKImageCropViewController.h"

Just create a view controller for image cropping and set the delegate.

- (IBAction)onButtonTouch:(UIButton *)sender
{
    UIImage *image = [UIImage imageNamed:@"image"];
    RSKImageCropViewController *imageCropVC = [[RSKImageCropViewController alloc] initWithImage:image];
    imageCropVC.delegate = self;
    [self.navigationController pushViewController:imageCropVC animated:YES];
}

Delegate

RSKImageCropViewControllerDelegate provides four delegate methods. To use them, implement the delegate in your view controller.

@interface ViewController () <RSKImageCropViewControllerDelegate>

Then implement the delegate functions.

// Crop image has been canceled.
- (void)imageCropViewControllerDidCancelCrop:(RSKImageCropViewController *)controller
{
    [self.navigationController popViewControllerAnimated:YES];
}

// The original image has been cropped.
- (void)imageCropViewController:(RSKImageCropViewController *)controller
                   didCropImage:(UIImage *)croppedImage
                  usingCropRect:(CGRect)cropRect
{
    self.imageView.image = croppedImage;
    [self.navigationController popViewControllerAnimated:YES];
}

// The original image has been cropped. Additionally provides a rotation angle used to produce image.
- (void)imageCropViewController:(RSKImageCropViewController *)controller
                   didCropImage:(UIImage *)croppedImage
                  usingCropRect:(CGRect)cropRect
                  rotationAngle:(CGFloat)rotationAngle
{
    self.imageView.image = croppedImage;
    [self.navigationController popViewControllerAnimated:YES];
}

// The original image will be cropped.
- (void)imageCropViewController:(RSKImageCropViewController *)controller
                  willCropImage:(UIImage *)originalImage
{
    // Use when `applyMaskToCroppedImage` set to YES.
    [SVProgressHUD show];
}

DataSource

RSKImageCropViewControllerDataSource provides three data source methods. The method imageCropViewControllerCustomMaskRect: asks the data source a custom rect for the mask. The method imageCropViewControllerCustomMaskPath: asks the data source a custom path for the mask. The method imageCropViewControllerCustomMovementRect: asks the data source a custom rect in which the image can be moved. To use them, implement the data source in your view controller.

@interface ViewController () <RSKImageCropViewControllerDataSource>

Then implement the data source functions.

// Returns a custom rect for the mask.
- (CGRect)imageCropViewControllerCustomMaskRect:(RSKImageCropViewController *)controller
{
    CGSize maskSize;
    if ([controller isPortraitInterfaceOrientation]) {
        maskSize = CGSizeMake(250, 250);
    } else {
        maskSize = CGSizeMake(220, 220);
    }
    
    CGFloat viewWidth = CGRectGetWidth(controller.view.frame);
    CGFloat viewHeight = CGRectGetHeight(controller.view.frame);
    
    CGRect maskRect = CGRectMake((viewWidth - maskSize.width) * 0.5f,
                                 (viewHeight - maskSize.height) * 0.5f,
                                 maskSize.width,
                                 maskSize.height);
    
    return maskRect;
}

// Returns a custom path for the mask.
- (UIBezierPath *)imageCropViewControllerCustomMaskPath:(RSKImageCropViewController *)controller
{
    CGRect rect = controller.maskRect;
    CGPoint point1 = CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect));
    CGPoint point2 = CGPointMake(CGRectGetMaxX(rect), CGRectGetMaxY(rect));
    CGPoint point3 = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    
    UIBezierPath *triangle = [UIBezierPath bezierPath];
    [triangle moveToPoint:point1];
    [triangle addLineToPoint:point2];
    [triangle addLineToPoint:point3];
    [triangle closePath];
    
    return triangle;
}

// Returns a custom rect in which the image can be moved.
- (CGRect)imageCropViewControllerCustomMovementRect:(RSKImageCropViewController *)controller
{
    // If the image is not rotated, then the movement rect coincides with the mask rect.
    return controller.maskRect;
}

Coming Soon

  • If you would like to request a new feature, feel free to raise as an issue.

Demo

Build and run the RSKImageCropperExample project in Xcode to see RSKImageCropper in action. Have fun. Fork and send pull requests. Figure out hooks for customization.

Contact

Ruslan Skorb

License

This project is is available under the MIT license. See the LICENSE file for more info. Attribution by linking to the project page is appreciated.

rskimagecropper's People

Contributors

dbergman avatar jjochen avatar jkrzemie avatar pronebird avatar ruslanskorb avatar timshadel avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.