上篇大緻說明了已實作的功能點及大緻的實作方式，本篇詳細說明如何通過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調用手機攝像頭功能。