97

H5界面调用原生，实现拍照、选择图库和文件功能

 6 years ago
source link: http://www.10tiao.com/html/274/201806/2650577949/1.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

需求：

通过webview加载H5界面，而H5界面中有一个调用拍照和选择照片的功能。

iOS是可以自动调起的，Android不能直接调起，需要对webview进行一些设置才能调起。

下面，对这个步骤进行一下详细的说明

步骤：

    1，在manifest中添加权限：
              <uses-permission android:name="android.permission.CAMERA"/>
              <uses-permission android:name="android.permission.INTERNET"/>
             <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>    
             <uses-permission android:name="android.hardware.camera"/>

2，对webview进行一些基本权限设置

webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("UTF-8");
webSettings.setAllowContentAccess(true); // 是否可访问Content Provider的资源，默认值 true
webSettings.setAllowFileAccess(true);    // 是否可访问本地文件，默认值 true

3，初始化WebChromeClient

1>实现WebView的方法

//扩展浏览器上传文件
//3.0++版本
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
     openFileChooserImpl(uploadMsg);
}
//3.0--版本
public void openFileChooser(ValueCallback<Uri> uploadMsg) {
     openFileChooserImpl(uploadMsg);
}
public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
      openFileChooserImpl(uploadMsg);
}
//5.0++版本
@Override
public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                onenFileChooseImpleForAndroid(filePathCallback);
      return true;
}

2>openFileChooserImpl方法

private void openFileChooserImpl(ValueCallback<Uri> uploadMsg) {
        mUploadMessage = uploadMsg;
        Intent j = new Intent(Intent.ACTION_GET_CONTENT);
        Intent i = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        i.addCategory(Intent.CATEGORY_OPENABLE);
        i.setType("*/*");
        startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
}

3> onenFileChooseImpleForAndroid(filePathCallback);

private void onenFileChooseImpleForAndroid(ValueCallback<Uri[]> filePathCallback) {
        mUploadMessageForAndroid5 = filePathCallback;
        final List<Intent> cameraIntents = new ArrayList<Intent>();
        File fileUri = new File(Environment.getExternalStorageDirectory().getPath() + "/" + SystemClock.currentThreadTimeMillis() + ".jpg");
        imageUri = Uri.fromFile(fileUri);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            imageUri = FileProvider.getUriForFile(getActivity(), getActivity().getPackageName() + ".fileprovider", fileUri);//通过FileProvider创建一个content类型的Uri
        }
        Intent intentCamera = new Intent();
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            intentCamera.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
            //添加这一句表示对目标应用临时授权该Uri所代表的文件
        }
        intentCamera.setAction(MediaStore.ACTION_IMAGE_CAPTURE);
        //将拍照结果保存至photo_file的Uri中，不保留在相册中
        intentCamera.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        cameraIntents.add(intentCamera);
        Intent contentSelectionIntent = new Intent(Intent.ACTION_GET_CONTENT);
        contentSelectionIntent.addCategory(Intent.CATEGORY_OPENABLE);
        contentSelectionIntent.setType("*/*");
        Intent i = new Intent(Intent.ACTION_CHOOSER);
        i.putExtra(Intent.EXTRA_INTENT, contentSelectionIntent);
        i.putExtra(Intent.EXTRA_TITLE, "File Chooser");
        Intent chooserIntent = Intent.createChooser(i, "Image Chooser");
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, cameraIntents.toArray(new Parcelable[]{}));
        getActivity().startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE_FOR_ANDROID_5);
    }

4>onActivityResult进行回调

public void onActivityResult(int requestCode, int resultCode, Intent intent) {
    if (requestCode == FILECHOOSER_RESULTCODE) {
        if (null == mUploadMessage)
            return;
        Uri result = intent == null || resultCode != RESULT_OK ? null : intent.getData();
        mUploadMessage.onReceiveValue(result);
        mUploadMessage = null;
    } else if (requestCode == FILECHOOSER_RESULTCODE_FOR_ANDROID_5) {
        if (null == mUploadMessageForAndroid5)
            return;
        Uri result = (intent == null || resultCode != RESULT_OK) ? null : intent.getData();
        if (result != null) {
            mUploadMessageForAndroid5.onReceiveValue(new Uri[]{result});
        } else {
            Uri[] results = new Uri[]{imageUri};
            mUploadMessageForAndroid5.onReceiveValue(results);
        }
        mUploadMessageForAndroid5 = null;
    }
}

结语：希望对各位有些帮助。



report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK