参考：浏览器端javascript调用手机终端本地功能实现02-功能点汇总

在UIWebView中调用摄像头、相册、图库

iOS 6以上版本的Mobile Safari支持在网页中调用摄像头，只需要放置以下代码：

<input type="file" capture="camera" accept="image/*" id="cameraInput">

但是iOS 5的浏览器还不支持这个功能，如果需要调用摄像头，则依然需要通过Hybrid开发方式来实现。

首先，创建一个文件命名为camera.html，定义三个按钮分别用于获取摄像头、图库、相册：

<script> function cameraCallback(imageData) { var img = createImageWithBase64(imageData); document.getElementById("cameraWrapper").appendChild(img); } function photolibraryCallback(imageData) { var img = createImageWithBase64(imageData); document.getElementById("photolibraryWrapper").appendChild(img); } function albumCallback(imageData) { var img = createImageWithBase64(imageData); document.getElementById("albumWrapper").appendChild(img); } function createImageWithBase64(imageData) { var img = new Image(); img.src = "data:image/jpeg;base64," + imageData; img.style.width = "50px"; img.style.height = "50px"; return img; }</script><p style="text-align:center;padding:20px;"> <a href="js-call://camera/cameraCallback">拍照</a>&nbsp;&nbsp; <a href="js-call://photolibrary/photolibraryCallback">图库</a>&nbsp;&nbsp; <a href="js-call://album/albumCallback">相册</a></p><fieldset> <legend>拍照</legend> <p id="cameraWrapper"> </p></fieldset><fieldset> <legend>图库</legend> <p id="photolibraryWrapper"> </p></fieldset><fieldset> <legend>相册</legend> <p id="albumWrapper"> </p></fieldset>

Native实现代码如下：

#import "LwmeViewController.h"#import "NSData+Base64.h"// Base64代码从 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.h 和 http://svn.cocoasourcecode.com/MGTwitterEngine/NSData+Base64.m 获取@interface LwmeViewController ()<UIWebViewDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate>{ NSString *callback; // 定义变量用于保存返回函数}@end@implementation LwmeViewController- (void)viewDidLoad{ [super viewDidLoad]; // 设置delegate并载入html文件 self.webView.delegate = self; NSString *filePath = [[NSBundle mainBundle] pathForResource:@"camera" ofType:@"html"]; NSString *fileContent = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil]; [self.webView loadHTMLString:fileContent baseURL:nil];}- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ NSString *requestString = [[request URL] absoluteString]; NSString *protocol = @"js-call://"; //协议名称 if ([requestString hasPrefix:protocol]) { NSString *requestContent = [requestString substringFromIndex:[protocol length]]; NSArray *vals = [requestContent componentsSeparatedByString:@"/"]; if ([[vals objectAtIndex:0] isEqualToString:@"camera"]) { // 摄像头 callback = [vals objectAtIndex:1]; [self doAction:UIImagePickerControllerSourceTypeCamera]; } else if([[vals objectAtIndex:0] isEqualToString:@"photolibrary"]) { // 图库 callback = [vals objectAtIndex:1]; [self doAction:UIImagePickerControllerSourceTypePhotoLibrary]; } else if([[vals objectAtIndex:0] isEqualToString:@"album"]) { // 相册 callback = [vals objectAtIndex:1]; [self doAction:UIImagePickerControllerSourceTypeSavedPhotosAlbum]; } else { [webView stringByEvaluatingJavaScriptFromString:@"alert('未定义/lwme.cnblogs.com');"]; } return NO; } return YES;}- (void)doAction:(UIImagePickerControllerSourceType)sourceType{ UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init]; imagePicker.delegate = self; if ([UIImagePickerController isSourceTypeAvailable:sourceType]) { imagePicker.sourceType = sourceType; } else { UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"照片获取失败" message:@"没有可用的照片来源" delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil]; [av show]; return; } // iPad设备做额外处理 if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) { UIPopoverController *popover = [[UIPopoverController alloc] initWithContentViewController:imagePicker]; [popover presentPopoverFromRect:CGRectMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 3, 10, 10) inView:self.view permittedArrowDirections:UIPopoverArrowDirectionAny animated:YES]; } else { [self presentModalViewController:imagePicker animated:YES]; }}- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{ if ([[info objectForKey:UIImagePickerControllerMediaType] isEqualToString:@"public.image"]) { // 返回图片 UIImage *originalImage = [info objectForKey:UIImagePickerControllerOriginalImage]; // 设置并显示加载动画 UIAlertView *av = [[UIAlertView alloc] initWithTitle:@"正在处理图片..." message:@"/n/n" delegate:self cancelButtonTitle:nil otherButtonTitles:nil, nil]; UIActivityIndicatorView *loading = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray]; loading.center = CGPointMake(139.5, 75.5); [av addSubview:loading]; [loading startAnimating]; [av show]; // 在后台线程处理图片 dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_LOW, 0), ^{ // 这里可以对图片做一些处理，如调整大小等，否则图片过大显示在网页上时会造成内存警告 NSString *base64 = [UIImagePNGRepresentation(originalImage, 0.3) base64Encoding]; // 图片转换成base64字符串 [self performSelectorOnMainThread:@selector(doCallback:) withObject:base64 waitUntilDone:YES]; // 把结果显示在网页上 [av dismissWithClickedButtonIndex:0 animated:YES]; // 关闭动画 }); } [picker dismissModalViewControllerAnimated:YES];}- (void)doCallback:(NSString *)data{ [self.webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"%@('%@');", callback, data]];}@end

以上简单的代码虽然比较粗糙，但也基本实现了功能，如果有更多的需求，可以在这个基础上进行一些封装、扩展。

源代码提供在GitHub：https://github.com/corminlu/UIWebViewCallCamera