安卓WebView(H5)调用原生相机及相册

这篇具有很好参考价值的文章主要介绍了安卓WebView(H5)调用原生相机及相册。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在开始叙述正文之前笔者先声明一下应用场景:例如在网页上的即时通讯需要能拍照或者从图库选择图片来进行上传,此场景下就可以用到这篇文章的内容

正文
首先,如果你已经把相机以及访问文件夹的权限都加上了并且WebView的基础操作都做完了,就差上传图片了的话那就参考以下代码主,要是重写了setWebChormeClient(){}里的onShowFileChooser(){}方法

   private ValueCallback<Uri> mUploadMessage; 
   private ValueCallback<Uri[]> mUploadCallbackAboveL;
   private Uri imageUri; //图片地址

   mWv.setWebChromeClient(new WebChromeClient() {
            //相机  相册
            @Override
            public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
                mUploadCallbackAboveL = filePathCallback;
                takePhoto();
                return true;
            }
        });

	/**
     * 调用相机/相册选择窗
     */
    private void takePhoto() {
        String filePath = Environment.getExternalStorageDirectory() +File.separator;
//                + 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, 1);
    }

 @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("Base", "调用方法  chooseBelow");
        if (Activity.RESULT_OK == resultCode) {
            updatePhotos();

            if (data != null) {
                // 这里是针对文件路径处理
                Uri uri = data.getData();
                if (uri != null) {
                    Log.e("Base", "系统里取到的图片:" + uri.toString());
                    mUploadMessage.onReceiveValue(uri);
                } else {
                    mUploadMessage.onReceiveValue(null);
                }
            } else {
                // 以指定图像存储路径的方式调起相机,成功后返回data为空
                Log.e("Base", "自己命名的图片:" + 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("Base", "调用方法  chooseAbove   " +data);

        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("Base", "系统里取到的图片:" + uri.toString());
                    }
                    mUploadCallbackAboveL.onReceiveValue(results);
                } else {
                    mUploadCallbackAboveL.onReceiveValue(null);
                }
            } else {
                Log.e("Base", "自己命名的图片:" + 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);
    }

以上基本就是在网页上进行调用相机或者打开相册的全部内容了,但是还有几个需要注意的点
第一点:如果你在已经弹出来的弹窗上选择相机或者相册时会报错导致闪退,那么你就需要在Activity的onCreate()方法里加入以下代码

//为了避免点击相册或者相机的按钮时报错
StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
StrictMode.setVmPolicy(builder.build());

第二点:因为该代码里拍完照照片存储的路径是

storage/emulated/0/图片名.jpg

所以就需要你判断是否有访问该文件夹的权限,如果你没有权限那么你拍完的照是无法传给前端的,所以拍完照点击完图片上的对号你会发现没有反应,这就是没有权限所以取不到图片导致的。你也可以在Android Studio上的Device File Explorer里面找到该文件看是不是能打开,如果显示的是安卓WebView(H5)调用原生相机及相册
那么这个时候就是证明没有权限,你可以去获取权限或者用另外一种简单的方法就是在项目下的build.gradle将 targetSdk的值改成23或者小于23(笔者是用的23)即可(改targetSdk的值或者获取权限视自己的项目的情况而定),以上就是全部内容,如果有哪里有误还请各位读者指出,感谢文章来源地址https://www.toymoban.com/news/detail-515360.html

到了这里,关于安卓WebView(H5)调用原生相机及相册的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 项目笔记——安卓WebView加载H5页面问题处理

    项目为Android应用,使用WebView加载H5页面。 此文仅记录项目开发中遇到的问题及解决方法。 目录 一,下拉刷新 二,H5唤起支付宝 三,H5本地文件选择 四,加载图片失败 五,输入框被软键盘遮挡 页面Reload需要下拉刷新功能,所以使用了SwipeRefreshLayout包裹WebView。但使用时不管

    2024年02月02日
    浏览(12)
  • uni.chooseImage在微信小程序的webview中安卓手机调起不了相册和相机的BUG

    问题描述: 使用uniapp编译的h5页面,放到同样用uniapp编译的微信小程序的webview中时,出现了uni.chooseImage在安卓手机的微信上唤起不了相册和相机的问题,但是ios端就没这个问题。 具体不知道是什么原因导致的,猜测是小程序的webview不支持,但是ios端就没问题,就很无语 解决

    2024年02月10日
    浏览(9)
  • 安卓调用手机摄像头和相册

    新建一个CameraAlbumTest项目,修改activity_main.xml中的代码 可以看到在布局文件当中,有一个Button和一个ImageView.Button是用于打开摄像头进行拍照的,而ImageView则是用于将拍到图片显示出来. 在MainActivity中编写调用摄像头的代码逻辑 首先创建了一个File对象,用于存储摄像头拍下的图片

    2024年02月09日
    浏览(7)
  • 微信小程序调用相机拍摄或手机相册

    微信小程序调用相机拍摄或手机相册

    拍摄或从手机相册中选择图片或视频。

    2024年01月16日
    浏览(10)
  • uniapp,小程序上传图片,调用相机,打开相册功能

    uniapp上传头像上传图片,上传评价等功能都可以使用这个方法 将接口替换和参数替换其他共用直接使用即可,需要弹窗就使用俩个参数,直接打开相册或者相机就只填一个参数

    2024年02月14日
    浏览(6)
  • Android与H5交互 -- 点击H5跳转到 Android原生 页面 ,webview与h5(js)交互

    Android与H5交互 -- 点击H5跳转到 Android原生 页面 ,webview与h5(js)交互

    Android与H5交互 app开发过程中,利用原生+h5模式来开发是比较常见的 下面案例演示的是:原生调起一个H5页面,然后H5点击跳转到原生 WebViewActivity页面 调用H5 ,点击H5链接 跳转到原生MainActivity页面 注意 别忘了 !-- 添加网络权限 -- 一、清单文件,增加的配置 data的数据就是H5

    2023年04月14日
    浏览(9)
  • win11原生应用(如相机、相册、日历、记事本、邮件、画图等)英文改中文方法

    win11原生应用(如相机、相册、日历、记事本、邮件、画图等)英文改中文方法

            很多小伙伴发现win11升级后或者突然有一天自己电脑中的win11原生应用win11原生应用(如相机、相册、日历、记事本、邮件、画图等)突然都变成了英文界面,然后这些应用中还没有设置语言的选项,那么这个时候该怎么办呢?别着急,这是系统首选语言的锅,按照以下

    2024年02月08日
    浏览(52)
  • 【小程序】媒体API能力集成指南——视频、原生视频、WebView、相机API

    ty.createVideoContext(string id) 创建 video 上下文 VideoContext 对象。 参数 string id video 组件的 id 返回值 VideoContext VideoContext 实例,可通过 ty.createVideoContext 获取。 VideoContext 通过 id 跟一个 video 组件绑定,操作对应的 video 组件。 方法 VideoContext.play VideoContext.play() 播放视频 Vid

    2024年04月08日
    浏览(8)
  • Apppium driver的一些比较重要操作,原生APP和H5 APP(WEBVIEW)

    //重置app 这时候driver会重置,相当于卸载重装应用。所以本地缓存会失效 driver.reset() //启动app的某一个activity 例如:driver.start_activity(\\\"com.wuba.zhuanzhuan\\\",\\\"./presentation.view.activity.LaunchActivity\\\") //获得所有contexts driver.contexts 结果如下: [\\\'NATIVE_APP\\\', \\\'WEBVIEW_com.android.browser\\\'] NATIVE_APP:na

    2024年02月02日
    浏览(4)
  • 微信小程序webview(H5页面)调用微信小程序支付

    1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现; 2.微信小程序(webview访问H5页面)必须使用微信小程序支付; 如何实现以及实现方式以及支付后页面返回功能: 商品详情(h5页面)--商品确认页(h5页面)--收银台(h5页面)(点击调

    2024年02月11日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包