Image Picker: then crop image to circle?

krye · 02-19-2010, 10:45 AM

I want to pick an image and then crop to a circle. Cropping to a square is easy enough. I put:

Code:

self.imagePicker.allowsEditing = YES;

under viewDidLoad.

and then

Code:

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
	
	if (picker == imagePicker) {
		
		// set your obverse image
		// Delete any existing image.
		NSManagedObject *oldImage = recipe.image;
		
		if (oldImage != nil) {
			[recipe.managedObjectContext deleteObject:oldImage];
			
		}
		
		// Create an image object for the new image.
		NSManagedObject *obverse = [NSEntityDescription insertNewObjectForEntityForName:@"Image" inManagedObjectContext:recipe.managedObjectContext];
		recipe.image = obverse;
		
		// Set the image for the image managed object.
		//UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
		UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];	
		[recipe.image setValue:selectedImage forKey:@"obverse"];
		
		// Create a thumbnail version of the image for the recipe object.
		CGSize size = selectedImage.size;
		CGFloat ratio = 0;
		if (size.width > size.height) {
			ratio = 320.0 / size.width;
		} else {
			ratio = 320.0 / size.height;
		}
		CGRect rect = CGRectMake(0.0, 0.0, ratio * size.width, ratio * size.height);
		
		UIGraphicsBeginImageContext(rect.size);
		[selectedImage drawInRect:rect];
		recipe.thumbnailImage = UIGraphicsGetImageFromCurrentImageContext();
}

This allows me to crop my image to a square that is 320x320.

Anyone know how to change it so that the image is cropped to a circle that is 320 wide?

Noise · 02-19-2010, 01:45 PM

I'm very interested in this as well!

dljeffery · 02-21-2010, 02:47 PM

You can create a circle (or just any arbitrary shape/pattern) masking graphic in some graphics editor and add it to your project, and then use CGImageMaskCreate (to create your mask image), and CGImageCreateWithMask (to apply your mask over your photo).

I do this with a sort of torn-off looking mask to create a thumbnail image of photos for table cells in my app.

krye · 02-21-2010, 04:27 PM

Quote:

Originally Posted by dljeffery

You can create a circle (or just any arbitrary shape/pattern) masking graphic in some graphics editor and add it to your project, and then use CGImageMaskCreate (to create your mask image), and CGImageCreateWithMask (to apply your mask over your photo).

I do this with a sort of torn-off looking mask to create a thumbnail image of photos for table cells in my app.

Wow, I had no idea it was that easy. Thanks for the tip. A simpe search turned up this how-to

dljeffery · 02-21-2010, 04:48 PM

That sample code you linked to looks like a good overview, but make sure you release your CGImageRefs returned by CGImageMaskCreate and CGImageCreateWithMask (which it doesn't do in the sample code)!

Code:

UIImage *maskedImage = [UIImage imageWithCGImage:masked];

CGImageRelease(mask);
CGImageRelease(masked);
		
return maskedImage;

ZunePod · 02-21-2010, 04:48 PM

But how would you then go on to make the Mask transparent (and also the thing it was masking)?

krye · 02-21-2010, 05:06 PM

Quote:

Originally Posted by dljeffery

That sample code you linked to looks like a good overview, but make sure you release your CGImageRefs returned by CGImageMaskCreate and CGImageCreateWithMask (which it doesn't do in the sample code)!

Code:

UIImage *maskedImage = [UIImage imageWithCGImage:masked];

CGImageRelease(mask);
CGImageRelease(masked);
		
return maskedImage;

You're right, basically now I have this:

Code:

//mask images
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
	
	UIImage *testMaskImage = [UIImage imageNamed: @"mask.png"];
	CGImageRef maskRef = testMaskImage.CGImage;
	
	CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
										CGImageGetHeight(maskRef),
										CGImageGetBitsPerComponent(maskRef),
										CGImageGetBitsPerPixel(maskRef),
										CGImageGetBytesPerRow(maskRef),
										CGImageGetDataProvider(maskRef), NULL, false);
	CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
	CGImageRelease(mask);
	UIImage* retImage= [UIImage imageWithCGImage:masked];
	CGImageRelease(masked);
	return retImage;
	
}

But how do you call it?

dljeffery · 02-21-2010, 05:16 PM

Quote:

Originally Posted by ZunePod

But how would you then go on to make the Mask transparent (and also the thing it was masking)?

In the areas where your mask image is black, your original image will show through... in areas where the mask image is white, your original image won't show through.

ZunePod · 02-21-2010, 05:18 PM

Yeah, but then you get a big dirty white mark around the circle, which I don't want/need.

krye · 02-21-2010, 05:22 PM

So I populate my image view via:

Code:

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
	
		// Set the image for the image managed object.
		//UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
		UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];	
		[recipe.image setValue:selectedImage forKey:@"obverse"];
		
		// Create a thumbnail version of the image for the recipe object.
		CGSize size = selectedImage.size;
		CGFloat ratio = 0;
		if (size.width > size.height) {
			ratio = 320.0 / size.width;
		} else {
			ratio = 320.0 / size.height;
		}
		CGRect rect = CGRectMake(0.0, 0.0, ratio * size.width, ratio * size.height);
		
		UIGraphicsBeginImageContext(rect.size);
		[selectedImage drawInRect:rect];
		recipe.thumbnailImage = UIGraphicsGetImageFromCurrentImageContext();
}

How would I alter it to now include the mask?

Code:

//mask images
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
	
	UIImage *testMaskImage = [UIImage imageNamed: @"mask.png"];
	CGImageRef maskRef = testMaskImage.CGImage;
	
	CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
										CGImageGetHeight(maskRef),
										CGImageGetBitsPerComponent(maskRef),
										CGImageGetBitsPerPixel(maskRef),
										CGImageGetBytesPerRow(maskRef),
										CGImageGetDataProvider(maskRef), NULL, false);
	CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
	CGImageRelease(mask);
	UIImage* retImage= [UIImage imageWithCGImage:masked];
	CGImageRelease(masked);
	return retImage;
	
}

dljeffery · 02-21-2010, 05:22 PM

Quote:

Originally Posted by krye

You're right, basically now I have this:

Code:

//mask images
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {

But how do you call it?

Just like you'd call anything...

Code:

UIImage *maskImage = [UIImage imageNamed:@"circlemask.png"];
UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];	

UIImage *maskedImage = [self maskImage:selectedImage withMask:maskImage];

linkmx · 02-21-2010, 05:32 PM

Quote:

Originally Posted by ZunePod

Yeah, but then you get a big dirty white mark around the circle, which I don't want/need.

Can you show the mask your using, plus the original and the masked images so we can see if there's anything wrong there?

ZunePod · 02-21-2010, 05:34 PM

I'm just using theory atm, away from my Mac.

But from what I've heard, it seems that if the mask was white, it would be as is, so you would have a circle, which then had the rest of a white rectangle.

linkmx · 02-21-2010, 05:37 PM

Quote:

Originally Posted by ZunePod

I'm just using theory atm, away from my Mac.

But from what I've heard, it seems that if the mask was white, it would be as is, so you would have a circle, which then had the rest of a white rectangle.

No, as was explain earlier, the black portions of the mask will show, the white portions will be transparent.

ZunePod · 02-21-2010, 05:41 PM

Ah, cool, thanks for clearing that up (notice the pun?) *bookmark'd*

krye · 02-21-2010, 07:37 PM

This isn't working for s***. Anyone have a sample project they can post so I can figure out what goes where?

Thanks.

dljeffery · 02-22-2010, 04:42 PM

Hmm... what exactly is not working, and in what way?

krye · 02-22-2010, 05:18 PM

Quote:

Originally Posted by dljeffery

Hmm... what exactly is not working, and in what way?

Well, I have:

Code:

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
	
		// Set the image for the image managed object.
		//UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
		UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];	
		[recipe.image setValue:selectedImage forKey:@"obverse"];
		
		// Create a thumbnail version of the image for the recipe object.
		CGSize size = selectedImage.size;
		CGFloat ratio = 0;
		if (size.width > size.height) {
			ratio = 320.0 / size.width;
		} else {
			ratio = 320.0 / size.height;
		}
		CGRect rect = CGRectMake(0.0, 0.0, ratio * size.width, ratio * size.height);
		
		UIGraphicsBeginImageContext(rect.size);
		[selectedImage drawInRect:rect];
		recipe.thumbnailImage = UIGraphicsGetImageFromCurrentImageContext();
}

and

Code:

//mask images
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
	
	UIImage *testMaskImage = [UIImage imageNamed: @"mask.png"];
	CGImageRef maskRef = testMaskImage.CGImage;
	
	CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
										CGImageGetHeight(maskRef),
										CGImageGetBitsPerComponent(maskRef),
										CGImageGetBitsPerPixel(maskRef),
										CGImageGetBytesPerRow(maskRef),
										CGImageGetDataProvider(maskRef), NULL, false);
	CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
	CGImageRelease(mask);
	UIImage* retImage= [UIImage imageWithCGImage:masked];
	CGImageRelease(masked);
	return retImage;
	
}

I tried to add:

Code:

UIImage *maskImage = [UIImage imageNamed:@"circlemask.png"];
UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];	

UIImage *maskedImage = [self maskImage:selectedImage withMask:maskImage];

but it complains that "maskedImage" is unused and

Code:

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

doesn't seem to get called no matter what I do.

dljeffery · 02-22-2010, 05:48 PM

Try this:

Code:

- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage {
	CGImageRef maskRef = maskImage.CGImage;
	CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
								  CGImageGetHeight(maskRef),
						 		  CGImageGetBitsPerComponent(maskRef),
								  CGImageGetBitsPerPixel(maskRef),
								  CGImageGetBytesPerRow(maskRef),
								  CGImageGetDataProvider(maskRef), 
                                                                  NULL, 
                                                                  false);

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

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info {
	
	// Set the image for the image managed object.
	//UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];						   
        UIImage *selectedImage = [info objectForKey:@"UIImagePickerControllerEditedImage"];	
	UIImage *maskImage = [UIImage imageNamed: @"mask.png"];
        UIImage *maskedImage = [self maskImage:selectedImage withMask:maskImage];

	[recipe.image setValue:maskedImage forKey:@"obverse"];
		
	// Create a thumbnail version of the image for the recipe object.
	CGSize size = maskedImage.size;
	CGFloat ratio = 0;
	if (size.width > size.height) {
		ratio = 320.0 / size.width;
	} else {
		ratio = 320.0 / size.height;
	}
	CGRect rect = CGRectMake(0.0, 0.0, ratio * size.width, ratio * size.height);
		
	UIGraphicsBeginImageContext(rect.size);
	[maskedImage drawInRect:rect];
	recipe.thumbnailImage = UIGraphicsGetImageFromCurrentImageContext();
}

krye · 02-22-2010, 06:08 PM

Quote:

Originally Posted by dljeffery

Try this: ......

Amazing how you can tinker with something for hours and not figure it out, but as soon as someone shows you it's like "duh, how else would you do it?"

Thanks so much for getting me past this. I PM'd you a promo code form one of my apps.

Thanks again.

matschundmodder · 06-22-2010, 03:53 AM

Hello Guys,

I'm sorry for my stupidity. I am a student and have to work at the moment. My task is to build an iphone app, which can choose or take a picture and send this to a webserver. This is what I've already managed to do.
Now the second task is, that you can edit the picture. Just like Krye wanted to do.

I took dljeffery code. but i have absolutely no idea how to integrate this code into my program.
I have one ViewController in which I can choose or take the picture. now i want to set a button "edit picture", which should open another view where i can crop the picture now.. But I dont really know, how to to get the picture from the one class to the other.

plz can somebody help me out, otherwise my boss is driving crazy

if you want to have the code for choosing, taking pictures and that to a webserver, just email me.. i copied and pasted it from other users and tutorial..

Thanks in advance.