首页 > 代码库 > 浏览器端javascript调用手机终端本地功能实现03-拍照

浏览器端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代理中加入以下代码段

//初始化UIWebviewself.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调用手机摄像头功能。