I need to divide an image into 9 pieces programmatically. Any suggestions on how to do this?
There are many ways to slice and dice an image but here is one. It uses Quartz to cut an image into 9 equal-sized fractions. Notice it does not handle rotated images (by that I mean images with imageOrientation!=0) but it should get you started:
+(NSArray *)splitImageInTo9:(UIImage *)im{
CGSize size = [im size];
NSMutableArray *arr = [[NSMutableArray alloc] initWithCapacity:9];
for (int i=0;i<3;i++){
for (int j=0;j<3;j++){
CGRect portion = CGRectMake(i * size.width/3.0, j * size.height/3.0, size.width/3.0, size.height/3.0);
UIGraphicsBeginImageContext(portion.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextScaleCTM(context, 1.0, -1.0);
CGContextTranslateCTM(context, 0, -portion.size.height);
CGContextTranslateCTM(context, -portion.origin.x, -portion.origin.y);
CGContextDrawImage(context,CGRectMake(0.0, 0.0,size.width, size.height), im.CGImage);
[arr addObject:UIGraphicsGetImageFromCurrentImageContext()];
UIGraphicsEndImageContext();
}
}
return [arr autorelease];
}
The output will be an array of the 9 images each of size (with/3, height/3)
The code below is also a solution that detects the piece of the picture that was tapped on. The idea is to take a UIImage and use CGImageCreateWithImageInRect to crop out pieces. From the cropped piece create a new UIImage and place it in a UIImageView. In order to get the tap gesture to work I had to place the UIImageView in a UIView. Finally, provide the gesture and a unique tag so that the piece can be identified when tapped on.
- (void)loadView {
UIView* root = [[UIView alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
UIImage* whole = [UIImage imageNamed:@"whole.jpg"]; //I know this image is 300x300
int partId = 0;
for (int x=0; x<=200; x+=100) {
for(int y=0; y<=200; y+=100) {
CGImageRef cgImg = CGImageCreateWithImageInRect(whole.CGImage, CGRectMake(x, y, 100, 100));
UIImage* part = [UIImage imageWithCGImage:cgImg];
UIImageView* iv = [[UIImageView alloc] initWithImage:part];
UIView* sView = [[UIView alloc] initWithFrame:CGRectMake(200-x, 200-y, 100, 100)];
[sView addSubview:iv];
[iv release];
UITapGestureRecognizer* tap = [[UITapGestureRecognizer alloc] initWithTarget:self
action:@selector(tap:)];
tap.numberOfTapsRequired = 1;
[sView addGestureRecognizer:tap];
[tap release];
sView.tag = partId;
[root addSubview:sView];
[sView release];
partId++;
CGImageRelease(cgImg);
}
}
self.view = root;
}
- (void)tap:(UITapGestureRecognizer*)gesture
{
NSLog(@"image tap=%d", gesture.view.tag);
}
If you want the parts of the image will be organized you need to use some UIImageView in the final view.. just take a look at this code :
UIImage* whole = [UIImage imageNamed:@"permanent_cosmetics_pretty.jpg"];
int partId = 0;
for (int x=0; x<=300; x+=100) {
for(int y=0; y<=300; y+=100) {
CGImageRef cgImg = CGImageCreateWithImageInRect(whole.CGImage, CGRectMake(x, y, 100, 100));
UIImage* part = [UIImage imageWithCGImage:cgImg];
UIImageView* iv = [[UIImageView alloc] initWithImage:part];
switch (partId) {
case 0:
self.part1.image=iv.image;
break;
case 1:
self.part2.image=iv.image;
break;
case 2:
self.part3.image=iv.image;
break;
case 3:
self.part4.image=iv.image;
break;
case 4:
self.part5.image=iv.image;
break;
case 5:
self.part6.image=iv.image;
break;
case 6:
self.part7.image=iv.image;
break;
case 7:
self.part8.image=iv.image;
break;
case 8:
self.part9.image=iv.image;
break;
case 9:
self.part10.image=iv.image;
break;
case 10:
self.part11.image=iv.image;
break;
case 11:
self.part12.image=iv.image;
break;
default:
break;
}
[iv release];
partId++;
NSLog(@"part id = %d",partId);
}
}
[self.view addSubview:self.finalView];
Following code slice image based on parameters, add borders and displays:
-(NSMutableArray *)getImagesFromImage:(UIImage *)image withRow:(NSInteger)rows withColumn:(NSInteger)columns{
NSMutableArray *images = [NSMutableArray array];
CGSize imageSize = image.size;
CGFloat xPos = 0.0, yPos = 0.0;
CGFloat width = imageSize.width/rows;
CGFloat height = imageSize.height/columns;
for (int y = 0; y < columns; y++) {
xPos = 0.0;
for (int x = 0; x < rows; x++) {
CGRect rect = CGRectMake(xPos, yPos, width, height);
CGImageRef cImage = CGImageCreateWithImageInRect([image CGImage], rect);
UIImage *dImage = [[UIImage alloc] initWithCGImage:cImage];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(x*width, y*height, width, height)];
[imageView setImage:dImage];
[imageView.layer setBorderColor:[[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth:1.0];
[self.view addSubview:imageView];
[images addObject:dImage];
xPos += width;
}
yPos += height;
}
return images;
}
Project download link: https://github.com/bpolat/Image-Slicer
Sample Usage and Result:
[self getImagesFromImage:[UIImage imageNamed:@"1.png"] withRow:4 withColumn:4];