Add Graphic to Photo Being Taken

[DenVog]

How do you add a graphic to a photo being taken with the iPhone's built-in camera? Ultimately, the application would have functionality similar to what is being done with Nice Photo.

I've been taking this in chunks of functionality. I am successful in bringing up the camera, taking a photo, and saving that image to the Photo App Camera Roll. My current challenge is with the two following pieces:

1. Display the graphic on top of the camera preview so the user can line up the graphic with their subject.
   - I have tried adding a graphic to the windows and views in Interface Builder, but I am not seeing them on screen when I run the app.
2. Saving the photo that is taken, along with the graphic that was displayed in the preview.
   - I have seen some threads on how to save an image of your active UIView using
   

   UIGraphicsGetImageFromCurrentImageContext()

   but as I understand it, this is roughly the equivalent of taking a screen shot and results in a degradation of image quality. Is there another way to accomplish this? Perhaps a way to save the photo at original quality then merge the views?

I did quite a bit of Google and forum searching on this topic, but didn't see this specifically covered. Thanks for any assistance.

[RickMaddy]

Step 1 is a matter of adding the images as UIImageViews to the image picker controller's view.

Step 2 Involves taking the UIImage from the image picker and using some Quartz 2D methods to draw that image to a context then drawing the overlays on top of that. Then using the function you mentioned to extract an image from the context.

[DenVog]

Originally Posted by RickMaddy

Step 1 is a matter of adding the images as UIImageViews to the image picker controller's view.

Step 2 Involves taking the UIImage from the image picker and using some Quartz 2D methods to draw that image to a context then drawing the overlays on top of that. Then using the function you mentioned to extract an image from the context.

Thanks for the suggestions Rick. I'm embarrassed to say I'm stuck on 1. I thought it would be as easy as dragging an Image View Object onto my MainWindow Camera View Controller, but that effectively takes over the whole screen (putting diagonal lines on it and killing my camera display) which is currently loaded from my CameraViewController.nib. The only IB View object in my CameraViewController.xib file is a sort of launch screen that opens at startup and has a button telling the camera to open, so putting a UIImageView there doesn't help either.

My code is loosely based on the Beginning iPhone Development Chapter 16 Camera example code.

[RickMaddy]

I doubt any of this can be done with IB. I don't use IB. I would do it all from code.

[DenVog]

Originally Posted by RickMaddy

I doubt any of this can be done with IB. I don't use IB. I would do it all from code.

I've been doing pretty much everything I can in IB, so I guess I'll have to learn something new on top of the new thing I'm already trying to learn.

I found a couple different ways to add an image on top of the picker. Not sure if one is more correct or efficient than the other.

UIImageView *cameraOverlay = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"overlay-image.png"]];
[picker.view sendSubviewToBack:cameraOverlay];
[cameraOverlay release];

This one does allow precise positioning of the image:

// x-coordinate, y-coordinate, width, height
CGRect cameraOverlayRect = CGRectMake(160,240,47,47);
UIImageView *cameraOverlay = [[UIImageView alloc] initWithFrame:cameraOverlayRect];
[cameraOverlay setImage:[UIImage imageNamed:@"overlay-image.png"]];
// supposed to enhance performance by explicitly stating opaque
cameraOverlay.opaque = YES;
[picker.view addSubview:cameraOverlay];
// Tells it to bring the subview to top of view layers, but don't think it's needed
[picker.view bringSubviewToFront:cameraOverlay];
[cameraOverlay release];

Now on to step 2. Any examples or pointers are appreciated.

[DenVog]

Originally Posted by RickMaddy

Step 2 Involves taking the UIImage from the image picker and using some Quartz 2D methods to draw that image to a context then drawing the overlays on top of that. Then using the function you mentioned to extract an image from the context.

I have found an example that will save the active UIView to the photo library. A step closer, but it is effectively the same as taking a screen shot. It's capturing the "Take Picture" overlay, camera button, saving dialog, and everything else. The image quality seems to be degraded as well.

#pragma mark -
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(NSDictionary *)editingInfo {
	//This grabs everything on the screen. The camera button, "saved" dialog, etc.
	UIGraphicsBeginImageContext(picker.view.bounds.size);
	[picker.view.layer renderInContext:UIGraphicsGetCurrentContext()];
	UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
	UIGraphicsEndImageContext();
	UIImageWriteToSavedPhotosAlbum(viewImage, nil, nil, nil);
	[self dismissModalViewControllerAnimated:YES];
}

This is confusing to me, as I thought by telling it to grab the "picker" view, it would only capture what was shown from the camera and its subview. Am I on the right path here? Thanks for any further guidance.

[cheesegravy]

Did you ever figure this out? I want to do something along the same lines.

[DenVog]

Originally Posted by cheesegravy

Did you ever figure this out? I want to do something along the same lines.

I have made some progress, but an still struggling with a few things:

1. If I set allowsImageEditing = NO, it doesn't save
2. I can't get the overlay graphic to display between the camera preview and the Take Photo button. It's on top of everything or below everything
3. The merged photo that gets save seems shifted when you look at it in the camera roll

[MikeBlah]

Originally Posted by DenVog

I have made some progress, but an still struggling with a few things:

1. If I set allowsImageEditing = NO, it doesn't save
2. I can't get the overlay graphic to display between the camera preview and the Take Photo button. It's on top of everything or below everything
3. The merged photo that gets save seems shifted when you look at it in the camera roll

i'd like to know how to do this as well. Is there anyway to make the overlay image semi-transparent so that you can still see the graphics over the image being taken?

[DenVog]

Originally Posted by MikeBlah

i'd like to know how to do this as well. Is there anyway to make the overlay image semi-transparent so that you can still see the graphics over the image being taken?

You can make the overlay image semi-transparent by changing the alpha to something lower than 1.

[MikeBlah]

thanks, now i just need to figure out how to save the camera image with my overlay image combined into one file... email it, etc...

[julietdarling]

I am a newbie to this and I am really impressed by the skills you guys all have. I hope that I will soon be able to do such things. I am currently working in California and it would be cool if someone of you would be interested a meeting. I think I have to learn a lot in order to be as good as you guys. Just send a PM if someone is interested.

[kallipigous]

Originally Posted by DenVog

I have made some progress, but an still struggling with a few things:

1. If I set allowsImageEditing = NO, it doesn't save
2. I can't get the overlay graphic to display between the camera preview and the Take Photo button. It's on top of everything or below everything
3. The merged photo that gets save seems shifted when you look at it in the camera roll

Do you know if there's a way to get a hook on the preview window after the picture is taken? I can happily overlay images onto the live camera but I need to switch it off when the retake use screen come up (I'm forcing people to shoot in landscape and tie preview comes up in portrait). Is there a call I can capture when the picture is taken (that's not ilegal).

I've found by the way that if I make the view 1600x1200 and scale it, I can happily save the image at full rez when I get it back in the view.

Toby

Helios sun calculator for cinematographers.
Chemical Wedding

[shadyrip]

Originally Posted by DenVog

I've been doing pretty much everything I can in IB, so I guess I'll have to learn something new on top of the new thing I'm already trying to learn.

I found a couple different ways to add an image on top of the picker. Not sure if one is more correct or efficient than the other.

UIImageView *cameraOverlay = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"overlay-image.png"]];
[picker.view sendSubviewToBack:cameraOverlay];
[cameraOverlay release];

This one does allow precise positioning of the image:

// x-coordinate, y-coordinate, width, height
CGRect cameraOverlayRect = CGRectMake(160,240,47,47);
UIImageView *cameraOverlay = [[UIImageView alloc] initWithFrame:cameraOverlayRect];
[cameraOverlay setImage:[UIImage imageNamed:@"overlay-image.png"]];
// supposed to enhance performance by explicitly stating opaque
cameraOverlay.opaque = YES;
[picker.view addSubview:cameraOverlay];
// Tells it to bring the subview to top of view layers, but don't think it's needed
[picker.view bringSubviewToFront:cameraOverlay];
[cameraOverlay release];

Now on to step 2. Any examples or pointers are appreciated.

First of all, this code helped me a lot understanding what I want to thank you.

I wonder if u guys can give me a hint to modify this sample code for my app needs.

Instead of assigning directly an image in addition to the camera I want to add programatically and image from an existing imageView. Is that clear enough to understand my point ?

It's in this line I guess I need to change something : initWithImage:[UIImage imageNamed:@"overlay-image.png"]];

[SnehalP]

Is there any way to disable snap shot option in ipad programmatically or through any configuration file?If it is not possible can we save the snap shots taken to user's photo library?
Any kind of help or reference is appreciated.