上篇大致说明了已实现的功能点及大致的实现方式，本篇详细说明如何通过js调用拍照的相关功能。
js代码部分已经在《浏览器端javascript调用手机终端本地功能实现02》中展现，主要说明android部分和ios部分的实现。请将js代码或文件放在要加载的服务器页面里。
android端实现
1 //定义拍照相关接口 2 private JSInterfaceCamera jsInterfaceCamera; 3 //初始化 4 jsInterfaceCamera=new JSInterfaceCamera(this, myHandler); 5 //添加js与本地代码通讯接口 6 webView.addJavascriptInterface(jsInterfaceCamera, "QM_APP_WEBVIEW_ENGINE_camera");
拍照相关接口java文件如下
1 package com.qimeng.activity; 2 3 import java.io.File; 4 5 import com.qimeng.workman.common.imgsupload.AlbumListActivity; 6 import com.qimeng.workman.common.imgsupload.util.Bimp; 7 8 import android.content.Intent; 9 import android.graphics.Bitmap; 10 import android.net.Uri; 11 import android.os.Environment; 12 import android.os.Handler; 13 import android.provider.MediaStore; 14 import android.webkit.JavascriptInterface; 15 import android.widget.Toast; 16 17 public class JSInterfaceCamera { 18 public final int SELECT_PICTURE=10000; 19 public final int SELECT_CAMER=10002; 20 21 private int PHOTO_REQUEST_CODE = 5; 22 private int ALBUM_REQUEST_CODE = 6; 23 public IndexActivity context; 24 public Handler myHandler; 25 public JSInterfaceCamera(IndexActivity a,Handler h){ 26 this.context=a; 27 this.myHandler=h; 28 } 29 @JavascriptInterface 30 public void request_albums(final String params){ 31 myHandler.post(new Runnable() { 32 @Override 33 public void run() { 34 //获取传过来的参数 35 context.setParamJS(params.split(",")); 36 Intent intent = new Intent(Intent.ACTION_GET_CONTENT); 37 intent.addCategory(Intent.CATEGORY_OPENABLE); 38 intent.setType("image/*"); 39 context.startActivityForResult(Intent.createChooser(intent, "选择图片"), SELECT_PICTURE); 40 } 41 }); 42 } 43 @JavascriptInterface 44 public void request_albums_multi(final String params){ 45 myHandler.post(new Runnable() { 46 @Override 47 public void run() { 48 //获取传过来的参数 49 context.setParamJS(params.split(",")); 50 //开始图片多选调用 51 while(Bimp.drr.size()>0){ 52 Bimp.drr.remove(0); 53 } 54 context.startActivityForResult(new Intent(context,AlbumListActivity.class), PHOTO_REQUEST_CODE); 55 } 56 }); 57 } 58 //开始上传 59 @JavascriptInterface 60 public void request_albums_multi_upload(final String params){ 61 myHandler.post(new Runnable() { 62 @Override 63 public void run() { 64 //获取传过来的参数 65 context.setParamJS(params.split(",")); 66 context.currentUploadNums=0; 67 if(Bimp.drr.size()>0){ 68 File f=new File(Bimp.drr.get(0).toString()); 69 context.jsApi.uploadPhoto(((context.getParamJS()[0].indexOf("http:")==0?"":"http://"))+context.getParamJS()[0], f, context, IndexActivity.REQUEST_CODE_MULTI_UPLOAD); 70 }else{ 71 Toast.makeText(context.getApplicationContext(), "没有选择上传图片，无法上传", Toast.LENGTH_LONG).show(); 72 } 73 } 74 }); 75 } 76 @JavascriptInterface 77 public void invoke_camera(final String params){ 78 myHandler.post(new Runnable() { 79 @Override 80 public void run() { 81 //获取传过来的参数 82 context.setParamJS(params.split(",")); 83 String state = Environment.getExternalStorageState(); 84 if (state.equals(Environment.MEDIA_MOUNTED)) { 85 Intent getImageByCamera = new Intent("android.media.action.IMAGE_CAPTURE"); 86 File fileDir = new File(Environment.getExternalStorageDirectory() + "/Myimage"); 87 if (!fileDir.exists()) { 88 fileDir.mkdirs();// 创建文件夹 89 } 90 File file = new File(Environment.getExternalStorageDirectory() 91 + "/Myimage/", String.valueOf(System.currentTimeMillis()) 92 + ".jpg"); 93 Uri imageUri = Uri.fromFile(file); 94 getImageByCamera.putExtra(MediaStore.EXTRA_OUTPUT, imageUri); 95 context.startActivityForResult(getImageByCamera, SELECT_CAMER); 96 } 97 else { 98 Toast.makeText(context.getApplicationContext(), "请确认已经插入SD卡", Toast.LENGTH_LONG).show(); 99 } 100 } 101 }); 102 } 103 }
ios端实现
在试图控制器viewDidLoad代理中加入以下代码段
//初始化UIWebview self.webView=[[UIWebView alloc] initWithFrame:CGRectMake(0, 0, UI_SCREEN_WIDTH, UI_SCREEN_HEIGHT)]; //设置代理 self.webView.delegate=self; //加载服务器页面 [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://10.1.2.123/webview/"]]]; [self.view addSubview:self.webView];
处理uiwebview的shouldStartLoadWithRequest代理
/** *截获特殊请求url，完成js与本地交互 */ - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { NSString *requestString = [[request URL] absoluteString]; NSArray *components = [requestString componentsSeparatedByString:@":"]; NSRange range=[[components objectAtIndex:1] rangeOfString:@"QM_APP_WEBVIEW_ENGINE"]; if ([components count] > 3 && range.location == 2 && range.length == 21) { NSString *cmd=(NSString *)[components objectAtIndex:2]; //上传参数1、请求地址；2、成功回调函数；3、失败回调函数 NSArray *params=[[components objectAtIndex:3] componentsSeparatedByString:@","]; self.currentParams=params; if([cmd isEqualToString:@"invoke_camera"){ //调用摄像头 UIImagePickerController * picker = [[UIImagePickerController alloc] init]; picker.delegate=delegate; if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) { picker.sourceType = UIImagePickerControllerSourceTypeCamera; picker.navigationBarHidden = NO; picker.wantsFullScreenLayout = YES; }else{ NSLog(@"模拟器无法打开相机"); } [self presentViewController:picker animated:YES completion:^{}]; } } }
至此，已实现js调用手机摄像头功能。