H5页面调用移动端相机拍照

/**
 * 创建时间:2021/10/19
 * 作者:康晨
 * 功能:榜单banner的点击跳转H5,其他页面也可使用
 */
public class WebActivity extends BaseActivity {

    private ActivityWebBindingImpl mWebBinding;
    private ValueCallback<Uri> mUploadMessage; //表单的数据信息
    private ValueCallback<Uri[]> mUploadCallbackAboveL;
    private Uri imageUri; //表单的数据信息


    @Override
    protected void initViewModel() {

    }

    @Override
    protected DataBindingConfig getDataBindingConfig() {
        return new DataBindingConfig(R.layout.activity_web, BR.vm, null)
                .addBindingParam(BR.click, new WebActivity.ClickProxy());
    }

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebBinding = (ActivityWebBindingImpl) getBinding();
        String web = getIntent().getStringExtra("web");
        String title = getIntent().getStringExtra("title");

        mWebBinding.tvTitle.setText(title);
        mWebBinding.webView.setWebChromeClient(new MyWebChromeClient());
        mWebBinding.webView.loadUrl(web);
        mWebBinding.webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //使用WebView加载显示url
                view.loadUrl(url);
                //返回true
                return true;
            }
        });
        //开启JavascriptInterface
        WebSettings settings = mWebBinding.webView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setSupportZoom(false);
        settings.setUseWideViewPort(true);
        settings.setLoadWithOverviewMode(true);
        settings.setSupportZoom(true);
        mWebBinding.webView.addJavascriptInterface(this, "android");
    }

    private class MyWebChromeClient extends WebChromeClient {
        // For Android >= 5.0
        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
            mUploadCallbackAboveL = filePathCallback;
            takePhoto();
            return true;

        }

        // For Android < 3.0
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            mUploadMessage = uploadMsg;
            takePhoto();
        }

        // For Android  >= 3.0
        public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            openFileChooser(uploadMsg);
        }

        //For Android  >= 4.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            openFileChooser(uploadMsg);
        }
    }

    /**
     * 调用相机/相册选择窗
     */
    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";
        imageUri = Uri.fromFile(new File(filePath + fileName));
        //相册相机选择窗
        Intent captureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
        captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
        Intent Photo = new Intent(Intent.ACTION_PICK,
                MediaStore.Images.Media.EXTERNAL_CONTENT_URI);
        Intent chooserIntent = Intent.createChooser(Photo, "选择上传方式");
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});
        startActivityForResult(chooserIntent, REQUEST_CODE);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (Build.VERSION.SDK_INT >= 21) {
            chooseAbove(resultCode, data);
        } else {
            chooseBelow(resultCode, data);
        }
    }

    /**
     * Android API < 21(Android 5.0)版本的回调处理
     */
    public void chooseBelow(int resultCode, Intent data) {
        Log.e("WangJ", "返回调用方法--chooseBelow");
        if (Activity.RESULT_OK == resultCode) {
            updatePhotos();

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

    /**
     * Android API >= 21(Android 5.0) 版本的回调处理
     */
    public void chooseAbove(int resultCode, Intent data) {
        Log.e("WangJ", "返回调用方法--chooseAbove");

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

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

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

    }

    public class ClickProxy {
        public void backActivity() {
            if (mWebBinding.webView.canGoBack()) {
                mWebBinding.webView.goBack();//返回前一个页面
            } else {
                finish();
            }
        }
    }

    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KEYCODE_BACK)) {
            if (mWebBinding.webView.canGoBack()) {
                mWebBinding.webView.goBack();
            } else {
                finish();
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

现在可以上传图片并且显示了,但是h5页面渲染有问题,不知道是那儿原因,后续如果有问题修改。

上一篇:iOS之H5与原生交互


下一篇:H5创建一个简单的qq注册页面