Kamis, 07 Maret 2013

Image Cropping Application Source Code for iOS

Download Code Link is at the end of the post.

BJ Image Cropper:

BJ Image Cropper is very simple UIVIEW perhaps user friendly that allows user to do cropping, using a cropper which is displayed over an image, and you can drag cropper over image areas and can crop.For this you will need already build .h and .m file which i will provide including whole application. You can get this application by reading above note.

Reference Link

How this application Works ? :

  • When this application start running you will need to select a photo from camera roll and then image is loaded into the UIIMAGEVIEW.
  • After this You will need to press the button Crop when you Touch, a cropper will appear on subview of image and then you have to select your cropping area by touching the ends of rectangle appearing in that Subview.
  • After this You have to touch another button which takes crop image into a Dummy Variable of type UIIMAGE and then you have to put that Dummy variable into the UIIMAGEVIEW.

The Reason for explaining this non-technical part is to let people understand the flow of the program.

Now Again.

Touch Select button => Image loaded into UIIMAGEVIEW

Touch Crop button => Image from UIIMAGEVIEW is loaded into UIVIEW and a Cropper is appeared on that UIVIEW which is able to drag.

Touch Apply Crop Button => Cropped Image from the UIVIEW is Loaded into UIIMAGE *Image and then into UIIMAGEVIEW = image ;

Now here Comes the Code:

  •  This is update is Used to update the gui mask or rectangle which is on UIVIEW.
  • Size of this Rectangle can also be changed by holding clicks at the ends of rectangle corners.
  • In this function if origin is changed then a new origin with same height and width is update
  • If height and width is changed then a new height and width is update.
  • Both above task can be done simultaneously.
  • This function uses BJIMAGECropper.h and BjimageCropper.m which will be provided if you need just comment.

- (void)updateDisplay {
self.boundsText.text = [NSString stringWithFormat:@"(%f, %f) (%f, %f)", CGOriginX(self.imageCropper.crop), CGOriginY(self.imageCropper.crop), CGWidth(self.imageCropper.crop), CGHeight(self.imageCropper.crop)];

self.preview.image = [self.imageCropper getCroppedImage];
self.preview.frame = CGRectMake(10,10,self.imageCropper.crop.size.width * 0.1, self.imageCropper.crop.size.height * 0.1);

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
if ([object isEqual:self.imageCropper] && [keyPath isEqualToString:@"crop"]) {
[self updateDisplay];

-(void) viewWillAppear:(BOOL)animated{
// No need to store… this is 1 use only anyway. Save memory, and release it when done.
self.imgPicker = [[UIImagePickerController alloc] init];
self.imgPicker.allowsEditing = NO;
self.imgPicker.delegate = self;

  • This function crops the image this function takes coordinates of mask or rectangle from gui and subtract all pixels from that location to end corners.


initWithFrame:CGRectMake(10,10,self.imageCropper.crop.size.width * 0.1, self.imageCropper.crop.size.height * 0.1)];
UIImage *im = [self.imageCropper getCroppedImage];
self.image_view.image = im;
for(UIView *sub in [self.view subviews])
if([sub isKindOfClass:[imageCropper class]])
[sub removeFromSuperview];

  •  This function creates a subview and extract image from UIImageView and creates a mask or rect on that image which is displayed on UIVIEW.
  • Means it creates a cropper on that gui UIVIEW where you image is displayed.


CGFloat height = image_view.bounds.size.height;
CGFloat width = image_view.bounds.size.width;
self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"tactile_noise.png"]];

self.imageCropper = [[BJImageCropper alloc] initWithImage:img andMaxSize:CGSizeMake(height,width) ];
[self.view addSubview:self.imageCropper];
self.imageCropper.center = self.view.center;
self.imageCropper.imageView.layer.shadowColor = [[UIColor blackColor] CGColor];
self.imageCropper.imageView.layer.shadowRadius = 3.0f;
self.imageCropper.imageView.layer.shadowOpacity = 0.8f;
self.imageCropper.imageView.layer.shadowOffset = CGSizeMake(1, 1);

[self.imageCropper addObserver:self forKeyPath:@"crop" options:NSKeyValueObservingOptionNew context:nil];

self.preview = [[UIImageView alloc] initWithFrame:CGRectMake(10,10,self.imageCropper.crop.size.width * 0.1, self.imageCropper.crop.size.height * 0.1)];
self.preview.image = [self.imageCropper getCroppedImage];
self.preview.clipsToBounds = YES;
self.preview.layer.borderColor = [[UIColor whiteColor] CGColor];
self.preview.layer.borderWidth = 2.0;
[self.view addSubview:self.preview];

  • This function accesses camera roll.
Camera Roll


if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) {
self.imgPicker.sourceType = UIImagePickerControllerSourceTypeCamera;
[self presentModalViewController:self.imgPicker animated:YES];
  • When Image is picked picker should be dismissed.

-(void)imagePickerControllerDidCancel :( UIImagePickerController *)picker{
[picker dismissModalViewControllerAnimated:YES];
  • Picks image from from camera roll.

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
[picker dismissModalViewControllerAnimated:YES];
img = [info objectForKey:@"UIImagePickerControllerOriginalImage"];



  • This the variable mask which is created on that gui UIView. 

- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {

CGImageRef maskRef = maskImage.CGImage;

CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
CGImageGetDataProvider(maskRef), NULL, false);

CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
return [UIImage imageWithCGImage:masked];

- (void)viewDidUnload
[super viewDidUnload];
[self setImageCropper:nil]; //image croper
[self setBoundsText:nil]; // image croper
[self.imgPicker release]; // Release this here, this will execute when modal view is popped.


- (void)viewDidUnload
[super viewDidUnload];
[self setImageCropper:nil]; //image croper
[self setBoundsText:nil]; // image croper
[self.imgPicker release]; // Release this here, this will execute when modal view is popped.
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);

Download Link: 

Tidak ada komentar:

Posting Komentar