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