WebView里调用相机/文件选取照片并上传

本文参考:Android——UI篇:WebView里调用相机/文件选取照片并上传 - 简书

第一步:重写WebChromeClient中的openFileChooser/onShowFileChooser方法

第二步:在openFileChooser/onShowFileChooser中处理逻辑

public class WebActivity extends AppCompatActivity {
    private ValueCallback<Uri[]> mUploadCallbackAboveL;
    private ValueCallback<Uri> mUploadCallbackBelow;
    private Uri imageUri;
    private final int REQUEST_CODE_IMG = 10011;
    private final int REQUEST_CODE_VIDEO = 10022;
    private final String TAG = "WebActivity";
    //省略无关代码
    .....

    @SuppressLint("SetJavaScriptEnabled")
    @Override
    protected void initView(Bundle savedInstanceState) {
        WebSettings mSettings = mWebView.getSettings();
        //省略无关代码
        .....
       //重写WebChromeClient 中的openFileChooser/onShowFileChooser方法
        WebChromeClient chromeClient = new WebChromeClient() {
            @Override
            public void onPermissionRequest(PermissionRequest request) {
                request.grant(request.getResources());
                request.getOrigin();
            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                if (mTvTitle != null && !TextUtils.isEmpty(title)) {
                    mTvTitle.setText(title);
                }
            }

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

            /**
             * API >= 21(Android 5.0.1)回调此方法
             */
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> valueCallback, FileChooserParams fileChooserParams) {
                // (1)该方法回调时说明版本API >= 21,此时将结果赋值给 mUploadCallbackAboveL,使之 != null
                mUploadCallbackAboveL = valueCallback;
                String[] acceptTypes = fileChooserParams.getAcceptTypes();
                if (acceptTypes.length > 0) {
                    openCamera(acceptTypes[0]);
                    LoggerUtils.e(TAG, "类型:" + acceptTypes[0]);
                }
                return true;
            }
        };
        mWebView.setWebChromeClient(chromeClient);
    }
    //省略无关代码
    .....
   
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == REQUEST_CODE_VIDEO) {
            if (null != mUploadCallbackBelow) {
                Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
                mUploadCallbackBelow.onReceiveValue(result);
                mUploadCallbackBelow = null;
            } else if (null != mUploadCallbackAboveL) {
                Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
                if (result != null) {
                    mUploadCallbackAboveL.onReceiveValue(new Uri[]{result});
                } else {
                    mUploadCallbackAboveL.onReceiveValue(null);
                }
                mUploadCallbackAboveL = null;
            }
        } else if (requestCode == REQUEST_CODE_IMG) {
            // 经过上边(1)、(2)两个赋值操作,此处即可根据其值是否为空来决定采用哪种处理方法
            if (mUploadCallbackBelow != null) {
                chooseBelow(resultCode, data);
            } else if (mUploadCallbackAboveL != null) {
                chooseAbove(resultCode, data);
            } else {
                ToastUtils.showShort("发生错误");
            }
        }
    }

    /**
     * 调用相机/相册选择器弹窗
     */
    private void openCamera(String accept) {
        if (accept.contains("video")) {
            Intent intent = new Intent(MediaStore.ACTION_VIDEO_CAPTURE);
            intent.putExtra(MediaStore.EXTRA_VIDEO_QUALITY, 1);//设置视频录制的质量,0为低质量,1为高质量。
            //intent.putExtra(MediaStore.EXTRA_DURATION_LIMIT, 6);//限制时长 单位秒
            //intent.putExtra(MediaStore.EXTRA_SIZE_LIMIT, 1024L * 1024 * 10);//指定视频最大允许的尺寸,单位为byte
            //开启摄像机
            startActivityForResult(intent, REQUEST_CODE_VIDEO);
        } else {
            // 指定拍照存储位置的方式调起相机
            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 intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
//        intent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri);
//        startActivityForResult(intent, REQUEST_CODE_IMG);


            // 选择图片(不包括相机拍照),则不用成功后发刷新图库的广播
//        Intent i = new Intent(Intent.ACTION_GET_CONTENT);
//        i.addCategory(Intent.CATEGORY_OPENABLE);
//        i.setType("image/*");
//        startActivityForResult(Intent.createChooser(i, "Image Chooser"), REQUEST_CODE_IMG);

            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, "Image Chooser");
            chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, new Parcelable[]{captureIntent});

            startActivityForResult(chooserIntent, REQUEST_CODE_IMG);
        }
    }

    /**
     * Android API < 21(Android 5.0)版本的回调处理
     *
     * @param resultCode 选取文件或拍照的返回码
     * @param data       选取文件或拍照的返回结果
     */
    private void chooseBelow(int resultCode, Intent data) {
        LoggerUtils.d(TAG, "返回调用方法--chooseBelow");
        if (RESULT_OK == resultCode) {
            updatePhotos();
            if (data != null) {
                // 这里是针对文件路径处理
                Uri uri = data.getData();
                if (uri != null) {
                    LoggerUtils.d(TAG, "系统返回URI:" + uri.toString());
                    mUploadCallbackBelow.onReceiveValue(uri);
                } else {
                    mUploadCallbackBelow.onReceiveValue(null);
                }
            } else {
                // 以指定图像存储路径的方式调起相机,成功后返回data为空
                LoggerUtils.d(TAG, "自定义结果:" + imageUri.toString());
                mUploadCallbackBelow.onReceiveValue(imageUri);
            }
        } else {
            mUploadCallbackBelow.onReceiveValue(null);
        }
        mUploadCallbackBelow = null;
    }

    /**
     * Android API >= 21(Android 5.0) 版本的回调处理
     *
     * @param resultCode 选取文件或拍照的返回码
     * @param data       选取文件或拍照的返回结果
     */
    private void chooseAbove(int resultCode, Intent data) {
        LoggerUtils.d(TAG, "返回调用方法--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) {
                        LoggerUtils.d(TAG, "系统返回URI:" + uri.toString());
                    }
                    mUploadCallbackAboveL.onReceiveValue(results);
                } else {
                    mUploadCallbackAboveL.onReceiveValue(null);
                }
            } else {
                LoggerUtils.d(TAG, "自定义结果:" + 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);
    }

}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Webview是一种嵌入Android应用程序内的网页视图控件,可以通过WebView来显示和加载网页内容,同时也支持一些交互功能,比如调用相机、定位等。H5是一种基于HTML和CSS的网页开发技术,可以在Webview中使用。以下是Webview H5调用相机的Demo: 1. HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>调用相机Demo</title> <style> img { width: 300px; height: auto; } </style> </head> <body> <h1>Webview H5调用相机Demo</h1> <p>请点击下面的按钮拍摄照片:</p> <button onclick="takePhoto()">拍照</button> <img id="photo" src="" alt="" /> <script> function takePhoto() { // 调用Android的相机接口 android.takePhoto(); } function setPhoto(dataUrl) { // 获取拍照后的base64编码数据,并显示在img标签中 var photo = document.getElementById('photo'); photo.src = dataUrl; photo.style.display = 'block'; } </script> </body> </html> ``` 2. Java代码: ```java public class MainActivity extends AppCompatActivity { private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); webView.setWebChromeClient(new MyWebChromeClient(this)); webView.addJavascriptInterface(new JsInterface(this), "android"); webView.loadUrl("file:///android_asset/index.html"); } static class MyWebChromeClient extends WebChromeClient { private Activity mActivity; MyWebChromeClient(Activity mActivity) { this.mActivity = mActivity; } @Override public void onPermissionRequest(final PermissionRequest request) { mActivity.runOnUiThread(new Runnable() { @Override public void run() { request.grant(request.getResources()); } }); } } static class JsInterface { private Activity mActivity; JsInterface(Activity mActivity) { this.mActivity = mActivity; } // 声明被JavaScript调用的方法 @JavascriptInterface public void takePhoto() { Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(mActivity.getPackageManager()) != null) { mActivity.startActivityForResult(takePictureIntent, 1); } } // 声明被Android调用的方法 @SuppressWarnings("unused") @JavascriptInterface public void setPhoto(String dataUrl) { final String finalDataUrl = dataUrl; mActivity.runOnUiThread(new Runnable() { @Override public void run() { webView.loadUrl("javascript:setPhoto('" + finalDataUrl + "');"); } }); } } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 1 && resultCode == RESULT_OK) { Bundle extras = data.getExtras(); Bitmap photo = (Bitmap) extras.get("data"); String dataUrl = "data:image/jpeg;base64," + bitmapToBase64(photo); webView.loadUrl("javascript:setPhoto('" + dataUrl + "');"); } } private String bitmapToBase64(Bitmap bitmap) { ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream(); bitmap.compress(Bitmap.CompressFormat.JPEG, 100, byteArrayOutputStream); byte[] byteArray = byteArrayOutputStream.toByteArray(); return Base64.encodeToString(byteArray, Base64.DEFAULT); } } ``` 这个Demo的实现过程比较简单,大致思路如下: 1. 在HTML代码中添加一个按钮和一个img标签,用于拍照和显示照片。 2. 在Angular中,将这个函数作为一个模块,供调用。比如这样一个调用摄像头的模块: ```javascript angular.module('demo', []) .controller('DemoController', function($scope) { $scope.takePhoto = function() { // 调用相机 navigator.camera.getPicture($scope.onPhotoSuccess, $scope.onPhotoFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL }); }; $scope.onPhotoSuccess = function(imageData) { // 显示照片 $scope.photo = "data:image/jpeg;base64," + imageData; }; $scope.onPhotoFail = function() { alert('拍照失败!'); }; }); ``` 3. 在Java代码中,创建一个WebChromeClient类,用于处理权限请求。在做Android 6.0 runtime权限处理时,无法直接使用`setWebChromeClient`函数,需要重载该函数以保证打开相机时不需要再次请求权限。 ```java static class MyWebChromeClient extends WebChromeClient { private Activity mActivity; MyWebChromeClient(Activity mActivity) { this.mActivity = mActivity; } @Override public void onPermissionRequest(final PermissionRequest request) { mActivity.runOnUiThread(new Runnable() { @Override public void run() { request.grant(request.getResources()); } }); } } ``` 4. 在Java的`JsInterface`类中,声明一个被JavaScript调用的方法`takePhoto()`,该方法通过意图调用系统相机应用。照片拍摄结束后,通过调用另一个被Android调用的方法`setPhoto(String dataUrl)`将照片通过WebView的`loadUrl()`函数递回JavaScript中。 ```java static class JsInterface { private Activity mActivity; JsInterface(Activity mActivity) { this.mActivity = mActivity; } @JavascriptInterface public void takePhoto() { Intent takePictureIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (takePictureIntent.resolveActivity(mActivity.getPackageManager()) != null) { mActivity.startActivityForResult(takePictureIntent, 1); } } @SuppressWarnings("unused") @JavascriptInterface public void setPhoto(String dataUrl) { final String finalDataUrl = dataUrl; mActivity.runOnUiThread(new Runnable() { @Override public void run() { webView.loadUrl("javascript:setPhoto('" + finalDataUrl + "');"); } }); } } ``` 5. 在Java代码的`onActivityResult()`方法中获取拍摄后的照片,并通过`loadUrl()`函数递到JavaScript中。 ```java @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (requestCode == 1 && resultCode == RESULT_OK) { Bundle extras = data.getExtras(); Bitmap photo = (Bitmap) extras.get("data"); String dataUrl = "data:image/jpeg;base64," + bitmapToBase64(photo); webView.loadUrl("javascript:setPhoto('" + dataUrl + "');"); } } ``` 以上就是一个简单的Webview H5调用相机Demo的实现过程。注意,该Demo中的实现方式仅供参考,实际应用中应该严格控制照片的安全性和隐私保护。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值