前端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() {
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                mUploadCallbackAboveL = filePathCallback;
                take();
                return true;
            }

            //<3.0
            public void openFileChooser(ValueCallback<Uri> uploadMsg) {
                mUploadMessage = uploadMsg;
                take();
            }
            //>3.0+
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType) {
                mUploadMessage = uploadMsg;
                take();
            }
            //>4.1.1
            public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
                mUploadMessage = uploadMsg;
                take();
            }
        });
 @Override
    protected 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;

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
### 回答1: 在HTML5中,可以利用JavaScript调用Android设备的相机相册。要实现这个功能,首先需要使用`<input>`标签来创建一个文件上传输入框,然后通过JavaScript来触发文件上传的事件。 ``` <input type="file" id="file-input" accept="image/*" capture> ``` 在上述代码中,`accept`属性用于指定上传的文件类型为图片,而`capture`属性表示可以通过设备的相机来拍照。 然后,在JavaScript中添加以下代码,当点击上传输入框时,弹出相机相册选择: ``` document.getElementById("file-input").addEventListener("click", function() { if (navigator.camera) { // 检测是否支持Camera API navigator.camera.getPicture(onSuccess, onFail, { quality: 50, destinationType: Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY // 选择相册 }); } else { alert("此设备不支持相机功能"); } }); function onSuccess(imageURI) { // 在成功获取图片后的处理逻辑 } function onFail(message) { // 获取图片失败时的处理逻辑 alert('获取图片失败: ' + message); } ``` 以上代码中,我们通过`navigator.camera.getPicture`方法来调用Android设备的相机相册,可以设置参数来控制图片的质量、目标类型和来源类型。`onSuccess`函数用于在成功获取图片时进行处理,而`onFail`函数则用于在获取图片失败时进行处理。 这样,当用户点击上传输入框时,会弹出相机相册的选择,用户可以拍照或从相册中选择图片进行上传。 ### 回答2: 要在H5中调用Android的弹框相机相册,可以通过以下步骤实现: 1. 在H5页面中,使用Javascript监听触发事件,例如点击一个按钮。 2. 在触发事件的回调函数中,通过Javascript与Android端进行通信,调用Android相机相册功能。可以使用WebView的addJavascriptInterface()方法创建一个Java对象,用于Javascript与Android端的交互。 3. 在Java对象中,实现调用Android相机相册的代码逻辑。可以通过Intent启动Android相机相册应用,并在回调中获取所选图片的路径或相机拍摄的照片数据。 4. 接收到图片路径或数据后,可以通过Javascript回调函数将获取的图片展示在H5页面上。 需要注意的是,调用Android相机相册需要申请相应权限,例如相机权限和访问外部存储器权限。同时,还需要处理Android不同版本的兼容性问题,如Android 6.0以上需要动态申请权限。另外,还需要注意Android设备的厂商定制和系统版本的差异可能导致一些兼容性问题。 总之,通过以上步骤,可以在H5页面中调用Android的弹框相机相册,实现拍照和选择图片的功能。 ### 回答3: 在H5页面中可以通过调用Android相机相册来实现弹框拍照和选择照片的功能。具体的实现步骤如下: 1. 首先,在H5页面中添加一个按钮或者其他的触发元素,用于触发调用相机相册的功能。 2. 在按钮的点击事件中,使用JavaScript与Android的交互方法,例如使用Webview的`addJavascriptInterface`方法,将一个JavaScript对象注入到Android中。 3. 在注入的JavaScript对象中,定义一个方法,用于调用Android相机相册。可以通过Android的`Intent`来实现,调用相机的代码如下: ```java private static final int REQUEST_CAMERA = 1; public void openCamera() { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); startActivityForResult(intent, REQUEST_CAMERA); } ``` 调用相册的代码如下: ```java private static final int REQUEST_GALLERY = 2; public void openGallery() { Intent intent = new Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(intent, REQUEST_GALLERY); } ``` 4. 在Android中,通过`onActivityResult`方法来处理相机相册的返回结果。可以在其中获取到用户拍摄的照片或选择的照片的Uri。 5. 将获取到的照片Uri返回给H5页面,可以通过调用JavaScript的方法,在Android中使用`WebView`的`loadUrl`方法执行JavaScript代码,来实现将照片Uri传递给H5页面。 通过以上步骤,H5页面就可以调用Android相机相册,并将拍摄的照片或选择的照片显示在页面上。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值