Android H5 输入框调用相机与相册实现详解

"Android网页H5 Input选择相机和系统相册" 在Android开发中，当集成H5页面时，用户可能需要在网页内上传图片，这通常涉及到调用系统的相机或相册来选取图片。本教程将详细介绍如何在Android的WebView中实现H5 input元素选择相机和系统相册的功能，并返回压缩后的图片给H5页面。 首先，我们需要创建一个自定义的`WebView`类，例如`WebViewActivity`，在这个类中，我们将处理H5页面与原生Android代码之间的交互。`WebViewActivity`通常会包含以下关键部分： 1. 初始化WebView：设置WebView的基本属性，如加载网页的URL，启用JavaScript支持，以及设置WebChromeClient和WebViewClient。这些是处理页面加载和交互的基础。 ```java WebView webView = new WebView(this); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl(intent.getStringExtra(INTENT_URL)); webView.setWebViewClient(new WebViewClient()); webView.setWebChromeClient(new WebChromeClient()); ``` 2. WebChromeClient：用于处理HTML中的复杂交互，如文件选择、Geolocation等。我们需要重写`onShowFileChooser`方法来响应`<input type="file">`标签的选择文件请求。 ```java webView.setWebChromeClient(new WebChromeClient() { @Override @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP) public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) { // 处理文件选择逻辑 } }); ``` 3. 权限检查：在Android 6.0及以上版本，我们需要动态申请读取和写入存储的权限，因为选择相机或相册需要这些权限。 ```java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { if (checkSelfPermission(Manifest.permission.READ_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED || checkSelfPermission(Manifest.permission.WRITE_EXTERNAL_STORAGE) != PackageManager.PERMISSION_GRANTED) { requestPermissions(new String[]{Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.WRITE_EXTERNAL_STORAGE}, 1); } } ``` 4. 处理文件选择：在`onShowFileChooser`中，我们需要启动一个Intent来让用户选择图片，可以同时选择相机和相册。 ```java Intent intent = fileChooserParams.createIntent(); startActivityForResult(intent, FILE_CHOOSER_RESULT_CODE); ``` 5. 处理选择结果：在`onActivityResult`方法中，我们获取用户选择的图片并进行处理，比如压缩图片大小，然后通过`ValueCallback`回调给H5页面。 ```java @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == FILE_CHOOSER_RESULT_CODE && filePathCallback != null) { if (resultCode == RESULT_OK) { if (data == null) { filePathCallback.onReceiveValue(new Uri[0]); } else { try { Uri[] value = new Uri[]{data.getData()}; // 压缩图片 // ... filePathCallback.onReceiveValue(value); } catch (IOException e) { e.printStackTrace(); filePathCallback.onReceiveValue(null); } } } else { filePathCallback.onReceiveValue(null); } } } ``` 6. 图片压缩：为了优化上传性能和减少服务器负载，可以选择在选取图片后对其进行压缩。这里可以使用第三方库如Glide、Picasso或者自定义的图片压缩方法。 7. JavaScript接口：为了让原生代码能够与H5页面通信，可以定义一些JavaScript接口。例如，可以定义一个接口来通知H5页面图片已准备好上传。 ```java webView.addJavascriptInterface(new JavaScriptInterface(), "android"); ``` 其中，`JavaScriptInterface`是一个Java类，它定义了与JavaScript交互的方法，例如： ```java @JavascriptInterface public void uploadImage(String imageUrl) { // 在H5页面中触发图片上传事件 webView.loadUrl("javascript:window.imageUpload('" + imageUrl + "')"); } ``` 总结来说，要在Android的H5页面中实现输入框选择相机和相册功能，需要自定义`WebView`类，处理文件选择，获取权限，压缩图片，并通过JavaScript接口与H5页面进行交互。以上就是实现这一功能的详细步骤，开发者可以根据具体需求进行调整和优化。