上篇大致说明了已实现的功能点及大致的实现方式，本篇详细说明如何通过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调用手机摄像头功能。
浏览器端javascript调用手机终端本地功能实现03-拍照
时间： 2024-10-24 21:56:40