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

上篇大致说明了已实现的功能点及大致的实现方式，本篇详细说明如何通过js调用拍照的相关功能。

js代码部分已经在《浏览器端javascript调用手机终端本地功能实现02》中展现，主要说明android部分和ios部分的实现。请将js代码或文件放在要加载的服务器页面里。

android端实现

　　

//定义拍照相关接口
private JSInterfaceCamera jsInterfaceCamera;
//初始化
jsInterfaceCamera=new JSInterfaceCamera(this, myHandler);
//添加js与本地代码通讯接口
webView.addJavascriptInterface(jsInterfaceCamera, "QM_APP_WEBVIEW_ENGINE_camera");

拍照相关接口java文件如下

package com.qimeng.activity;

import java.io.File;

import com.qimeng.workman.common.imgsupload.AlbumListActivity;
import com.qimeng.workman.common.imgsupload.util.Bimp;

import android.content.Intent;
import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Environment;
import android.os.Handler;
import android.provider.MediaStore;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class JSInterfaceCamera {
    public final int SELECT_PICTURE=10000;
    public final int SELECT_CAMER=10002;
    
    private int PHOTO_REQUEST_CODE = 5;
    private int ALBUM_REQUEST_CODE = 6;
    public IndexActivity context;
    public Handler myHandler;
    public JSInterfaceCamera(IndexActivity a,Handler h){
        this.context=a;
        this.myHandler=h;
    }
    @JavascriptInterface
    public void request_albums(final String params){
        myHandler.post(new Runnable() {
            @Override
            public void run() {
                //获取传过来的参数
                context.setParamJS(params.split(","));
                Intent intent = new Intent(Intent.ACTION_GET_CONTENT);  
                intent.addCategory(Intent.CATEGORY_OPENABLE);  
                intent.setType("image/*");  
                context.startActivityForResult(Intent.createChooser(intent, "选择图片"), SELECT_PICTURE); 
            }
        });
    }
    @JavascriptInterface
    public void request_albums_multi(final String params){
        myHandler.post(new Runnable() {
            @Override
            public void run() {
                //获取传过来的参数
                context.setParamJS(params.split(","));
                //开始图片多选调用
                while(Bimp.drr.size()>0){
                    Bimp.drr.remove(0);
                }
                context.startActivityForResult(new Intent(context,AlbumListActivity.class), PHOTO_REQUEST_CODE); 
            }
        });
    }
    //开始上传
    @JavascriptInterface
    public void request_albums_multi_upload(final String params){
        myHandler.post(new Runnable() {
            @Override
            public void run() {
                //获取传过来的参数
                context.setParamJS(params.split(","));
                context.currentUploadNums=0;
                if(Bimp.drr.size()>0){
                    File f=new File(Bimp.drr.get(0).toString());
                    context.jsApi.uploadPhoto(((context.getParamJS()[0].indexOf("http:")==0?"":"http://"))+context.getParamJS()[0], f, context, IndexActivity.REQUEST_CODE_MULTI_UPLOAD);
                }else{
                    Toast.makeText(context.getApplicationContext(), "没有选择上传图片，无法上传", Toast.LENGTH_LONG).show();
                }
            }
        });
    }
    @JavascriptInterface
    public void invoke_camera(final String params){
        myHandler.post(new Runnable() {
            @Override
            public void run() {
                //获取传过来的参数
                context.setParamJS(params.split(","));
                String state = Environment.getExternalStorageState();  
                   if (state.equals(Environment.MEDIA_MOUNTED)) {  
                           Intent getImageByCamera = new Intent("android.media.action.IMAGE_CAPTURE");
                        File fileDir = new File(Environment.getExternalStorageDirectory() + "/Myimage");
                        if (!fileDir.exists()) {
                            fileDir.mkdirs();// 创建文件夹
                        }
                           File file = new File(Environment.getExternalStorageDirectory()
                            + "/Myimage/", String.valueOf(System.currentTimeMillis())
                            + ".jpg");
                           Uri imageUri = Uri.fromFile(file);
                           getImageByCamera.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
                       context.startActivityForResult(getImageByCamera, SELECT_CAMER);  
                   }  
                   else {  
                       Toast.makeText(context.getApplicationContext(), "请确认已经插入SD卡", Toast.LENGTH_LONG).show();  
                   }
            }
        });
    }        
}

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调用手机摄像头功能。