Saturday, 11 July 2015

Image Cropping

STEP 1

WRITE IT IN TO "ViewController.h"

// ViewController.h
// PhotoEditDemo


#import <UIKit/UIKit.h>
#import "ZDStickerView.h"
#import "NLImageCropperView.h"

@interface ViewController : UIViewController<UIActionSheetDelegate, UIImagePickerControllerDelegate, UINavigationControllerDelegate, ZDStickerViewDelegate>


@property (strong, nonatomic) IBOutlet UIImageView *imgView;


@end



STEP 2

WRITE IT IN TO "ViewController.m"

//  ViewController.m
//  PhotoEditDemo


#import "ViewController.h"

@interface ViewController ()
{
    UIImagePickerController *imgPicker;
     NSString *str;
    ZDStickerView *sticker;
    UIImageView *imgView1;
    CGRect rect;
    NLImageCropperView *cropper;
}
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    rect=CGRectMake(100, 100, 100, 100);
    imgView1 = [[UIImageView alloc]initWithFrame:rect];
    
}
- (IBAction)click:(id)sender
{
    UIActionSheet *action = [[UIActionSheet alloc]initWithTitle:@"Choose Image" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:@"Save" otherButtonTitles:@"Add Image 1",@"Add Image 2", nil];
    
    [action showInView:self.view];

}



- (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
    NSLog(@"%ld",(long)buttonIndex);
    
    imgPicker = [[UIImagePickerController alloc]init];
    [imgPicker setDelegate:self];
    //imgPicker.delegate =self;
    imgPicker.allowsEditing = YES;
    imgPicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
   
    if (buttonIndex == 1)
    {
        [self presentViewController:imgPicker animated:YES completion:nil];
        str = @"image 1";

    }
    else if (buttonIndex == 2)
    {
        
        [self presentViewController:imgPicker animated:YES completion:nil];
        str = @"image 2";
    }
    else if (buttonIndex == 0)
    {
        [self.imgView addSubview:sticker];
       
        UIGraphicsBeginImageContextWithOptions(self.imgView.bounds.size, self.imgView.opaque, 0.0);
        [self.imgView.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *saveImage=UIGraphicsGetImageFromCurrentImageContext();
        
        UIImageWriteToSavedPhotosAlbum(saveImage, nil, nil, nil);
        
        self.imgView.image=saveImage;
        [sticker removeFromSuperview];
    }
}

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(NSDictionary *)editingInfo
{
    
    if ([str isEqualToString:@"image 1"])
    {
        self.imgView.image= image;
    }
    else if ([str isEqualToString:@"image 2"])
    {
        
        cropper=[[NLImageCropperView alloc]initWithFrame:self.view.bounds];
        [self.view addSubview:cropper];
        
        [self.imgView addSubview:sticker];
        [cropper setImage:image];
        [cropper setCropRegionRect:CGRectMake(50, 50, 100, 100)];

        UIButton *btnCrop=[[UIButton alloc]initWithFrame:CGRectMake(150, 550, 100, 30)];
        [btnCrop setTitle:@"Crop" forState:UIControlStateNormal];
        btnCrop.backgroundColor=[UIColor blackColor];
        [btnCrop addTarget:self action:@selector(CropImage) forControlEvents:UIControlEventTouchUpInside];
        
        [cropper addSubview:btnCrop];
    }
    
    [self dismissViewControllerAnimated:YES completion:nil];
}

- (void) CropImage
{
    imgView1.image= [cropper getCroppedImage];
    sticker = [[ZDStickerView alloc]initWithFrame:rect];
    [cropper removeFromSuperview];
    sticker.contentView=imgView1;
    [self.imgView addSubview:sticker];

}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end


STEP 3

ATTECH LIBRARY

1) Download Library from link which is given below.

SETP 4

SOLVE UNEXPECTED YOUR ERROR BY YOUR SELF

BEST OF LUCK


2 comments:

  1. I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
    We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
    maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
    harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
    efficient.
    I have a couple suggestions that might make it work better:
    1. Increase the height of the window the cover image is being displayed.
    2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
    3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
    shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
    4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
    in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
    element already)

    ReplyDelete
  2. I'm on the fence about this, while more customization is good, I have a feeling this is a "in-progress" update, it just feels incomplete and half-way there.
    We use badge layout for apps on design approvals (visual projects), so the image being displayed is important. Old layout "feels like" it had larger images,
    maybe because the images were cropped more loosely so it's easier to tell which project it was at quick glance. Now the image is cropped closer, making it
    harder to scan thru at quick glance. I find myself needing to click into the project more often than usual. Which makes the whole user experience less
    efficient.
    I have a couple suggestions that might make it work better:
    1. Increase the height of the window the cover image is being displayed.
    2. Let us to choose which image to be displayed as "cover" (like how Pinterest handles cover images of each board, was hoping for this for a long time)
    3. Let us adjust which part of the image to show and how tight or loose the crop is (with a fixed window, let us move the image around and maybe enlarge or
    shrink it to control what shows thru the window. Pinterest does a limited form of this, which is very useful in making the cover image relevant)
    4. Allow Cover Image to be ordered in different hierarchy (currently every element can be ordered differently except the Cover Image, it seems to be stuck
    in the 2nd spot, would like the option to set it on another spot in the layout. This one seems like an easy fix, since you guys allow that for every other
    element already)

    ReplyDelete