浏览器端javascript调用手机终端本地功能实现03-拍照

上篇大致说明了已实现的功能点及大致的实现方式，本篇详细说明如何通过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调用手机摄像头功能。