前端JS调用Android相机相册问题解决

需求：

Android中webview加载网页，网页中有一个按钮，点击之后，调启Android系统的相机和相册。

问题：

前端中的<input type="file" accept="image/*" />标签，在IOS中能够直接调启相机和相册，但是在Android中只能调启相册而不能调启相机。

尝试过，自己定义一个 JavaScriptInterface ，定义方法调启相机相册，获取图片后回传给前端网页。但是这里有个问题，传输过程比较耗时，app会出现卡顿的情况。

网上查找答案，找到一篇博文，解决了这个问题，而且不需要额外的JavaScriptInterface ：

https://blog.csdn.net/huangwenkui1990/article/details/51967464

方案

mCsiiWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {mUploadCallbackAboveL = filePathCallback;take();return true;}//<3.0public void openFileChooser(ValueCallback<Uri> uploadMsg) {mUploadMessage = uploadMsg;take();}//>3.0+public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {mUploadMessage = uploadMsg;take();}//>4.1.1public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {mUploadMessage = uploadMsg;take();}});

 @Overrideprotected void onActivityResult(int requestCode, int resultCode, Intent data) {super.onActivityResult(requestCode, resultCode, data);if (requestCode == FILECHOOSER_RESULTCODE) {if (null == mUploadMessage && null == mUploadCallbackAboveL) return;Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();if (mUploadCallbackAboveL != null) {onActivityResultAboveL(requestCode, resultCode, data);} else if (mUploadMessage != null) {Log.e("result", result + "");if (result == null) {mUploadMessage.onReceiveValue(imageUri);mUploadMessage = null;Log.e("imageUri", imageUri + "");} else {mUploadMessage.onReceiveValue(result);mUploadMessage = null;}}}}@SuppressWarnings("null")@TargetApi(Build.VERSION_CODES.LOLLIPOP)private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {if (requestCode != FILECHOOSER_RESULTCODE || mUploadCallbackAboveL == null) {return;}Uri[] results = null;if (resultCode == Activity.RESULT_OK) {if (data == null) {results = new Uri[]{imageUri};} else {String dataString = data.getDataString();ClipData clipData = data.getClipData();if (clipData != null) {results = new Uri[clipData.getItemCount()];for (int i = 0; i < clipData.getItemCount(); i++) {ClipData.Item item = clipData.getItemAt(i);results[i] = item.getUri();}}if (dataString != null)results = new Uri[]{Uri.parse(dataString)};}}if (results != null) {mUploadCallbackAboveL.onReceiveValue(results);mUploadCallbackAboveL = null;} else {mUploadCallbackAboveL.onReceiveValue(null);mUploadCallbackAboveL = null;}return;}private void take() {File imageStorageDir = new File(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), "MyApp");if (!imageStorageDir.exists()) {imageStorageDir.mkdirs();}File file = new File(imageStorageDir + File.separator + "IMG_" + String.valueOf(System.currentTimeMillis()) + ".jpg");imageUri = Uri.fromFile(file);final List<Intent> cameraIntents = new ArrayList<Intent>();final Intent captureIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);final PackageManager packageManager = getPackageManager();final List<ResolveInfo> listCam = packageManager.queryIntentActivities(captureIntent, 0);for (ResolveInfo res : listCam) {final String packageName = res.activityInfo.packageName;final Intent i = new Intent(captureIntent);i.setComponent(new ComponentName(res.activityInfo.packageName, res.activityInfo.name));i.setPackage(packageName);i.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);cameraIntents.add(i);}Intent i = new Intent(Intent.ACTION_GET_CONTENT);i.addCategory(Intent.CATEGORY_OPENABLE);i.setType("image/*");Intent chooserIntent = Intent.createChooser(i, "Image Chooser");chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, cameraIntents.toArray(new Parcelable[]{}));startActivityForResult(chooserIntent, FILECHOOSER_RESULTCODE);}private ValueCallback<Uri[]> mUploadCallbackAboveL;private Uri imageUri;private ValueCallback<Uri>   mUploadMessage;private final static int FILECHOOSER_RESULTCODE = 2;

前端JS调用Android相机相册问题解决相关推荐

Android与JS混编（js调用android相机扫描二维码）
参考demo http://www.cnblogs.com/mythou/p/3280023.html 项目源码: https://github.com/weifengzz/Androi ...
Android开发调用系统相机相册图片功能，解决小米手机拍照或者图片横竖相反问题，及小米手机相册图片路径问题
Android开发调用系统相机相册图片功能,解决小米手机拍照或者图片横竖相反问题,及小米手机相册图片路径问题 1.调用相机,兼容7.0 AndroidManifest配置 <providera ...
vue调用手机相机相册_详解Vue.js调用手机相机和相册以及上传
详解Vue.js调用手机相机和相册以及上传发布于 2020-7-7| 复制链接摘记: 组件 ```xhtml .. 组件 ```xhtml --> 选中{{imgList.length}}张 ...
uni-app中使用native.js调用android API实现双卡发送短信
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台官网地址因 ...
[转]JS调用Android里面的方法，Android调用JS里面的方法
FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...
js调用android本地java代码
js调用android本地java代码当在Android上使用WebView控件开发一个Web应用时,可以创建一个通过Javascript调用Android端java代码的接口.也就是可以通过Jav ...
Android开发-WebView中实现Android调用JS JS调用Android 【三】
老早之前就想总结下Webview相关的知识点了,因为互联网大潮中,很多APP都会使用到Webview,像那些不计其数的电商APP,无一例外的使用Webview:或者一些非电商APP中的像广告页面,注册 ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...
Android调用系统相机,相册裁切图片展示的实现
效果图: MainActivity package com.example.administrator.rxxjava;import android.content.Intent; import an ...

前端JS调用Android相机相册问题解决

前端JS调用Android相机相册问题解决相关推荐

最新文章

热门文章