Question

In my iPhone app, I want the user to be able to take a picture with the camera, then have that image appear in amongst some locally stored HTML in a UIWebView.

So I’ve got the UIImage object from the UIImagePickerController, now I need to find out how to save it to memory so I can reference it in the UIWebView.

Note that I don’t just want the image on it’s own in the UIWebView (I want to use the picture as a background-image in some HTML with other images layered on top). I’m also using other images and HTML that are stored in the app, that I’m referencing by setting the baseURL of the UIWebView to the bundle path, like:

NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[self.webView loadHTMLString:html baseURL:baseURL];

Answer 1

This is the way I ended up doing this. In the code that handles the image taken using the camera I actually save the file directly to disc:

// Get the image out of the camera
UIImage *image = (UIImage *)[info valueForKey:UIImagePickerControllerOriginalImage];

// Images from the camera are always in landscape, so rotate
UIImage *rotatedImage = scaleAndRotateImage(self.image);

// Save the image to the filesystem
NSData *imageData = UIImagePNGRepresentation(rotatedImage);
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsPath = [paths objectAtIndex:0];
NSString* savePath = [documentsPath stringByAppendingPathComponent:@"CameraPhoto.png"];
BOOL result = [imageData writeToFile:savePath atomically:YES];  

The function to rotate the image is copied straight from this blog, http://blog.logichigh.com/2008/06/05/uiimage-fix/.

Then when I want to display this image within the UIWebView, I just do a string replace to reference inject the path to the image. So in my HTML there’s like <img src="{CameraPhotoUrl}" /> and then:

// Build the reference to the image we just saved
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);
NSString *documentsPath = [paths objectAtIndex:0];
NSString *cameraImagePath = [documentsPath stringByAppendingPathComponent:[NSString stringWithFormat:@"CameraPhoto.png?x=%@", [[NSDate date] description]]];

// Load the HTML into the webview
NSString *htmlFilePath = [[NSBundle mainBundle] pathForResource:@"MyHtmlFile" ofType:@"htm"];
NSString *html = [NSString stringWithContentsOfFile:htmlFilePath encoding:NSUTF8StringEncoding error:nil];
html = [html stringByReplacingOccurrencesOfString:@"{CameraPhotoUrl}" withString:cameraImagePath];
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
[self.webView loadHTMLString:html baseURL:baseURL];

Voila! Note that I’m appending a date-based query string parameter to the CameraPhoto.png filename simply to prevent caching.