webview与 js交互调用系统相机和图库运用场景

54 阅读 0 评论 36 点赞

我是靠谱客的博主坚定樱桃，最近开发中收集的这篇文章主要介绍webview与 js交互调用系统相机和图库运用场景，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

运用场景
- 首先在Manifest.xml中添加如下权限
- 重写WebChromeClient
- webview 显示 H5页面

运用场景

公司项目需要利用webview展示H5页面，页面有上传图片的功能，需要webview 原生和js进行交互，利用webview 调用系统相机和图库，将图片传到js页面刷新

首先在Manifest.xml中添加如下权限

<!-- 访问网络权限  -->
    <uses-permission android:name="android.permission.INTERNET"/>
<!-- 调用摄像头的权限 -->
    <uses-permission android:name="android.permission.CAMERA"/>
<!-- 文件系统权限  -->
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
<!-- SD卡写权限 -->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS" />

android 8.0需要手动设置调用相机权限

 boolean camera = BaseApplication.checkPermission(this, Manifest.permission.CAMERA);
        if (camera) {
            jumpToWeb(url);
        } else {
            BaseApplication.startRequestPermision(this, Manifest.permission.CAMERA, REQUEST_CODE);
        }

 /**
     * 校验Permission权限
     *
     * @param context    Context
     * @param permission 权限名
     * @return 是否有权限
     */
    public static boolean checkPermission(Context context, String permission) {
        boolean result = false;
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (ContextCompat.checkSelfPermission(context, permission) == PackageManager.PERMISSION_GRANTED) {
                return true;
            } else {
                return false;
            }
        } else {
            PackageManager pm = context.getPackageManager();
            if (pm.checkPermission(permission, context.getPackageName()) == PackageManager.PERMISSION_GRANTED) {
                result = true;
            }
        }
        return result;
    }

/**
     * 申请单个权限
     */
    public static void startRequestPermision(Activity activity, String permission, int requestCode) {
        ActivityCompat.requestPermissions(activity, new String[]{permission}, requestCode);
    }

 @Override
    public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (requestCode == REQUEST_CODE) {
                if (grantResults != null && grantResults.length >= 1 && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
                    jumpToWeb(url);
                } else {
                    if (!shouldShowRequestPermissionRationale(Manifest.permission.CAMERA)) {
                        ToastUtils.show(this, R.string.camera_permission_not_evaluate);
                    } else {
                        BaseApplication.startRequestPermision(this, Manifest.permission.CAMERA, REQUEST_CODE);
                    }
                }
            }
        }
    }

重写WebChromeClient

public class SuWebChromeClient extends WebChromeClient {
private ValueCallback<Uri[]> mUploadCallbackAboveL;
    private ValueCallback<Uri> mUploadCallbackBelow;
    private Uri imageUri;
    private Activity activity;
    public void setActivity(Activity activity) {
        this.activity = activity;
    }
    public ValueCallback<Uri[]> getmUploadCallbackAboveL() {
        return mUploadCallbackAboveL;
    }

    public ValueCallback<Uri> getmUploadCallbackBelow() {
        return mUploadCallbackBelow;
    }

    public Uri getImageUri() {
        return imageUri;
    }

    /**
     * 8(Android 2.2) <= API <= 10(Android 2.3)回调此方法
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg) {
        LogUtils.e("SuningWebChromeClient", "运行方法 openFileChooser-1");
        // (2)该方法回调时说明版本API < 21，此时将结果赋值给 mUploadCallbackBelow，使之 != null
        mUploadCallbackBelow = uploadMsg;
        takePhoto();
    }

    /**
     * 11(Android 3.0) <= API <= 15(Android 4.0.3)回调此方法
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
        LogUtils.e("SuningWebChromeClient", "运行方法 openFileChooser-2 (acceptType: " + acceptType + ")");
        // 这里我们就不区分input的参数了，直接用拍照
        openFileChooser(uploadMsg);
    }

    /**
     * 16(Android 4.1.2) <= API <= 20(Android 4.4W.2)回调此方法
     */
    public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
        LogUtils.e("SuningWebChromeClient", "运行方法 openFileChooser-3 (acceptType: " + acceptType + "; capture: " + capture + ")");
        // 这里我们就不区分input的参数了，直接用拍照
        openFileChooser(uploadMsg);
    }

    /**
     * API >= 21(Android 5.0.1)回调此方法
     */
    @Override
    public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, WebChromeClient.FileChooserParams fileChooserParams) {
        LogUtils.e("SuningWebChromeClient", "运行方法 onShowFileChooser filePathCallback" + filePathCallback.toString());
        // (1)该方法回调时说明版本API >= 21，此时将结果赋值给 mUploadCallbackAboveL，使之 != null
        mUploadCallbackAboveL = filePathCallback;
        takePhoto();
        return true;
    }

    /**
     * 调用相机 图库
     */
    private void takePhoto() {
        // 指定拍照存储位置的方式调起相机
        String filePath = Environment.getExternalStorageDirectory() + File.separator
                + Environment.DIRECTORY_PICTURES + File.separator;
        String fileName = "IMG_" + DateFormat.format("yyyyMMdd_hhmmss", Calendar.getInstance(Locale.CHINA)) + ".jpg";

        File file = new File(filePath);
         //判断文件夹是否存在,如果不存在则创建文件夹
        if (!file.exists()) {
            file.mkdir();
        }

        Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
//        captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);

        if (Build.VERSION.SDK_INT < 24) {
            // 从文件中创建uri
            imageUri = Uri.fromFile(new File(filePath + fileName));
            captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        } else {
            //兼容android7.0 使用共享文件的形式
            ContentValues contentValues = new ContentValues(1);
            contentValues.put(MediaStore.Images.Media.DATA, new File(filePath + fileName).getAbsolutePath());
            imageUri = activity.getContentResolver().insert(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, contentValues);
            captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        }
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
            //添加这一句表示对目标应用临时授权该Uri所代表的文件
            captureIntent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
        }
//        选择图片
        Intent Photo = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI);

        Intent chooserIntent = Intent.createChooser(Photo, "Image Chooser");
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});
        activity.startActivityForResult(chooserIntent, Constants.CONSTANT_TEN);

    }
}

webview 显示 H5页面

public class WebViewActivity extends SuWebViewActivity {
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
 //    取消调用系统的选择相机和图库dialog，Activity被直接finish掉，所以直接删除父类的方法，可以解决这个问题
//        super.onActivityResult(requestCode, resultCode, data);
        LogUtils.e("WebViewActivity", "requestCode=" + requestCode + "  resultCode=" + resultCode);

        mUploadCallbackAboveL = mShopWebView.getmWebChromeClient().getmUploadCallbackAboveL();
        mUploadCallbackBelow = mShopWebView.getmWebChromeClient().getmUploadCallbackBelow();
        imageUri = mShopWebView.getmWebChromeClient().getImageUri();
        if (requestCode == Constants.CONSTANT_TEN) {
            // 经过上边(1)、(2)两个赋值操作，此处即可根据其值是否为空来决定采用哪种处理方法
            if (mUploadCallbackBelow != null) {
                chooseBelow(resultCode, data);
            } else if (mUploadCallbackAboveL != null) {
                chooseAbove(resultCode, data);
            } else {
                Toast.makeText(this, getString(R.string.upload_error), Toast.LENGTH_SHORT).show();
            }
        }
    }

    /**
     * Android API < 21(Android 5.0)版本的回调处理
     *
     * @param resultCode 选取文件或拍照的返回码
     * @param data       选取文件或拍照的返回结果
     */
    private void chooseBelow(int resultCode, Intent data) {
        LogUtils.e("WebViewActivity", "返回调用方法--chooseBelow");

        if (RESULT_OK == resultCode) {
            updatePhotos();

            if (data != null) {
                // 这里是针对文件路径处理
                Uri uri = data.getData();
                if (uri != null) {
                    LogUtils.e("WebViewActivity", "系统返回URI：" + uri.toString());
                    mUploadCallbackBelow.onReceiveValue(uri);
                } else {
                    mUploadCallbackBelow.onReceiveValue(null);
                }
            } else {
                // 以指定图像存储路径的方式调起相机，成功后返回data为空
                LogUtils.e("WebViewActivity", "自定义结果：" + imageUri.toString());
                mUploadCallbackBelow.onReceiveValue(imageUri);
            }
        } else {
            mUploadCallbackBelow.onReceiveValue(Uri.EMPTY);
        }
        mUploadCallbackBelow = null;
    }

    /**
     * Android API >= 21(Android 5.0) 版本的回调处理
     *
     * @param resultCode 选取文件或拍照的返回码
     * @param data       选取文件或拍照的返回结果
     */
    private void chooseAbove(int resultCode, Intent data) {
        LogUtils.e("WebViewActivity", "返回调用方法--chooseAbove");

        if (RESULT_OK == resultCode) {
            updatePhotos();

            if (data != null) {
                // 这里是针对从文件中选图片的处理
                Uri[] results;
                Uri uriData = data.getData();
                if (uriData != null) {
                    results = new Uri[]{uriData};
                    for (Uri uri : results) {
                        LogUtils.e("WebViewActivity", "系统返回URI：" + uri.toString());
                    }
                    mUploadCallbackAboveL.onReceiveValue(results);
                } else {
                    mUploadCallbackAboveL.onReceiveValue(null);
                }
            } else {
                LogUtils.e("WebViewActivity", "自定义结果：" + imageUri.toString());
                mUploadCallbackAboveL.onReceiveValue(new Uri[]{imageUri});
            }
        } else {
            mUploadCallbackAboveL.onReceiveValue(new Uri[]{Uri.EMPTY});
        }
        mUploadCallbackAboveL = null;
    }

    private void updatePhotos() {
        LogUtils.e("WebViewActivity", "updatePhotos");
        // 该广播即使多发（即选取照片成功时也发送）也没有关系，只是唤醒系统刷新媒体文件
        Intent intent = new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE);
        intent.setData(imageUri);
        sendBroadcast(intent);
    }
}