瀏覽器端javascript調用手機終端本地功能實現03-拍照

時間 2019-11-10

原文原文鏈接

上篇大體說明了已實現的功能點及大體的實現方式，本篇詳細說明如何經過js調用拍照的相關功能。javascript

js代碼部分已經在《瀏覽器端javascript調用手機終端本地功能實現02》中展示，主要說明android部分和ios部分的實現。請將js代碼或文件放在要加載的服務器頁面裏。html

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文件以下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代理中加入如下代碼段android

//初始化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代理ios

/**
 *截獲特殊請求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];
        //上傳參數一、請求地址；二、成功回調函數；三、失敗回調函數
        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:^{}];
        }
    }
}