Display UIImage from camera in UIWebView

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];

Found this question that has helped me along the way http://stackoverflow.com/questions/2453023 - however still curious what others may say. — Mick Byrne, Aug 21 '11 at 11:30
There is a similar question here: http://stackoverflow.com/questions/2171029/how-to-display-locally-stored-images-with-a-uiwebview — user281300, Aug 21 '11 at 11:34

score 6 · Answer 1 · answered Aug 21 '11 at 16:20

You definitely have the option of saving the file locally, getting it's absolute path and using that. Another option I used for a hybrid app once is converting the UIImage to Base64 string and pass that through javascript to the webview to do whatever you want it to do. To do that that after getting the UIImage encode it (there are various libraries out there to do this:

UIImage *image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
NSString *base64EncodedImage = [Base64 encode:UIImageJPEGRepresentation(image, 0.5)];

Then in your HTML you could have method that is given the base64 images and sets it to some IMG or background or whatever you need:

 function cameraCallback(imageData) {
     var image = document.getElementById('myImage');
     image.src = "data:image/jpeg;base64," + imageData;
 }

Or

<img src="data:image/gif;base64, [YOUR BASE64 STRING HERE]" alt="" width="80" height="15" />

Then in the HTML in the webview you would use

[mywebview stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"cameraCallback(%@)", base64EncodedImage]];

Interesting, I reckon it would have worked. Good way to avoid having to actually save the file to disc. My eventual solution is shown below. — Mick Byrne, Aug 30 '11 at 00:11

score 5 · Accepted Answer · answered Aug 30 '11 at 00:26

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.

Display UIImage from camera in UIWebView

2 Answers2