H5获取手机相机或相册图片两种方式-Android通过webview传递多张照片给H5

已于 2024-03-27 13:44:50 修改
阅读量6.7k 收藏 34
点赞数 8
分类专栏： Android 文章标签： 智能手机 android html html5 webview
于 2024-02-22 10:04:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly_xiamu/article/details/136219161
版权

需求目的： 手机机通过webView展示H5网页，在特殊场景下，需要使用相机拍照或者从相册获取照片，上传后台。

完整流程效果： 如下图
H5调用相机相册使用组件库方式流程

一、H5界面样例代码

使用html文件格式，文件直接打开就可以展示布局；一会在andriod webview中直接加载

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<div id="app">
    <h1>alllalalallalal 默认会被覆盖</h1>
</div>
<template id="why">
    <div>
        <h2>{{message}}</h2>
        <h2>{{counter}}</h2>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>

        <h1 style="text-align: center;">{{ title }}</h1>
        <div>
            <h2 style="text-align: center;">android选中照片H5展示</h2>
            <!--HTML5提供了<input type="file">元素来实现选取文件的功能,在WebView表现为调用onShowFileChooser-->
            <input accept="image/*" capture="camera" ref="imgFile" type="file" multiple
                   @change="previewFiles">
            <div id="preview">
                <img v-for="imgSrc in imageSources" :src="imgSrc" :key="imgSrc"
                     style="max-width: 100px; max-height: 100px; margin: 10px;">
            </div>
        </div>
    </div>
</template>


<body>
<!-- 引入 Vue 3 的 CDN 资源网络加载不了 -->
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<!-- 引入 Vue 3 的 CDN 资源,本地引用 -->
<script src="vue3.2.12global.js"></script>
<script>
        Vue.createApp({
            template: '#why',
            data: function () {
                return {
                    message: "功能开发中，敬请期待！",
                    counter: 100,
                    pictureSelectorContent: "相机选择结果:",
                    imageSources: [] // 存储图片的数据URL
                }
            },

            // 在你的 Vue 组件中处理 Webview 传递的数据
            mounted() {
                // 设置全局函数，用于接收 WebView 调用
                // window.pictureSelectorResult = this.pictureSelectorResult;
            },
            methods: {
                increment() {
                    this.counter++;
                    console.log("点击了+1");
                },
                decrement() {
                    this.counter--;
                    consloe.log("点击了-1");
                },
                startPictureSelector() {
                    window.android.startPictureSelector();
                },
                previewFiles() {
                    const files = this.$refs.imgFile.files;
                    this.imageSources = [];

                    for (let i = 0; i < files.length; i++) {
                        const file = files[i];
                        const reader = new FileReader();

                        reader.onload = (e) => {
                            this.imageSources.push(e.target.result);
                        };

                        reader.readAsDataURL(file);
                    }
                },
            },


        }).mount("#app")



</script>
<style>
        h1 {
            font-size: 80px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 20px;
            font-weight: bold;
            color: #C8EFD4;
        }

        h3 {
            font-size: 10px;
            font-weight: bold;
            color: #C8EFD4;
        }

        button1 {
            font-size: 60px;
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 20px;
            margin-top: 20px;
            text-align: center;
            /* 将文字水平居中显示 */
            display: flex;
            /* 将按钮设置为flex容器 */
            align-items: center;
            /* 将文字在垂直方向上居中显示 */
        }


</style>
</body>

</html>

上述代码是前端代码，使用vue3框架展示一个基础 加减demo界面（不重要的冗余），以及 一个打开文件的按钮以及展示图片
在这里插入图片描述

其中HTML5提供了元素来实现选取文件的功能，当在WebView表现为调用onShowFileChooser后，回调图片uri列表一一获取并展示

二、Android打开相机以及相册的两种方式

方式一：android 原生方式

实际效果和流程示图
在这里插入图片描述

1.android界面逻辑代码
这边使用的是kotlin语言，使用的fragment界面展示,使用binding加载了布局，以及声明了webview组件，在webview上导入html链接，使本地H5界面展示


class VisitorFragment : Fragment() {

    private lateinit var binding: FragmentVisitorBinding
    lateinit var mActivity: Activity
    private lateinit var mRoot: View

    companion object {
        const val TAG = "VisitorFragment"
    }

    private var mWebViewUrl: String = "file:///android_asset/vue_android_demo.html"

    var mAppName = MainApplication.instance.configuration.BASE_APP_LOGIN_IDENTITY
    var mSystemName = WebViewConstant.DEFAULT_SYSTEM_NAME
    private var mVisitorAndroidJs: VisitorAndroidJs = VisitorAndroidJs(this)

    private var mWebView: WebView? = null
    var mAndroidId: String = WebViewConstant.DEFAULT_DEVICE_SIGN
    var mApiKey: String = WebViewConstant.DEFAULT_API_KEY

    //回传H5时使用的对象
    private var mUploadCallback: ValueCallback<Array<Uri>>? = null

    //拍照传递的路径uri
    private var mImageUri: Uri? = null


    /**
     * onCreate方法是Activity生命周期的第一个回调方法
     * ，当Activity被创建时被调用。
     * 在这个方法中，你可以进行一些初始化的操作，比如设置布局、绑定控件、初始化数据等。
     *
     * @param savedInstanceState If the fragment is being re-created from
     * a previous saved state, this is the state.
     */
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = FragmentVisitorBinding.inflate(layoutInflater)
        mRoot = binding.root
        //记录
        val viewModel = ViewModelProvider(requireActivity())[DashboardViewModel::class.java]
        viewModel.setFragment(this)

        LogUtils.d(TAG, "onCreate")
    }

    /**
     * onCreateView方法是Fragment生命周期的回调方法，
     * 当Fragment创建并绘制其用户界面时被调用。
     * 在这个方法中，你可以通过返回一个View对象来定义Fragment的用户界面。
     * 它常用于加载布局文件、查找和初始化控件等操作。
     *
     * @return
     */
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        LogUtils.d(TAG, "onCreateView")
        initView(mRoot, layoutInflater, null)
        return mRoot
    }

    fun initView(parent: View?, inflater: LayoutInflater?, container: ViewGroup?) {
        //设置当前fragment
        mAndroidId = DeviceUtils.getUniqueId(mActivity)
        initWebView()
        mWebView?.loadUrl(mWebViewUrl)
        //弹出展示链接
        showToast("${getString(R.string.current_develop_environment)}$mWebViewUrl")
        initData()
    }

    override fun onAttach(context: Context) {
        super.onAttach(context)
        mActivity = context as Activity
    }

    /**
     * @param msg 内容
     */
    fun showToast(msg: String?) {
        val activity: Activity? = activity
        activity?.runOnUiThread {
            Toast.makeText(
                activity,
                msg,
                Toast.LENGTH_SHORT
            ).show()
        }
    }


    private fun initData() {

    }

    override fun onResume() {
        super.onResume()
        LogUtils.d(TAG, "onResume")
    }

    @SuppressLint("SetJavaScriptEnabled")
    private fun initWebView() {
        LogUtils.d(TAG, "initWebView")
        mWebView = binding.mainWebView

        mWebView?.requestFocus()
        mWebView?.isHorizontalScrollBarEnabled = false
        mWebView?.isVerticalScrollBarEnabled = false


        val setting = mWebView?.settings
        setting?.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW;
        setting?.javaScriptEnabled = true
        //用于开启或禁用其 DOM（文档对象模型）存储功能，浏览器缓存这些数据
        setting?.domStorageEnabled = true
        //允许访问文件，默认允许
        setting?.allowFileAccess = true
        //设置不，会引起webView重新不急，默认NARROW_COLUMNS
        setting?.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
        //自动缩放
        setting?.setSupportZoom(true)
        setting?.builtInZoomControls = true
        //自适应屏幕
        setting?.useWideViewPort = true
        setting?.loadWithOverviewMode = true
        //支持多窗口
        setting?.setSupportMultipleWindows(true)
        setting?.setAppCacheEnabled(true)
        setting?.domStorageEnabled = true
        //定位
        setting?.setGeolocationEnabled(true)
        //优先使用缓存数据，在缓存数据不存在的情况下才去获取网络数据
        setting?.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
        setting?.savePassword = false

        //设置js接口
        mVisitorAndroidJs.let { mWebView?.addJavascriptInterface(it, "android") }
        //页面不跳转浏览器
        mWebView?.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                LogUtils.d(TAG, "url： $url")
                view.loadUrl(url)
                return true
            }

            override fun shouldInterceptRequest(
                view: WebView,
                request: WebResourceRequest
            ): WebResourceResponse? {
                var uri = request.url
                var path = uri.path
                LogUtils.d(TAG, "uri: $uri, path: $path")
                return super.shouldInterceptRequest(view, request)
            }
        }


        //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
        mWebView?.webChromeClient = object : WebChromeClient() {
            //API >=21(android 5.0.1)回调此方法
            override fun onShowFileChooser(
                webView: WebView?,
                filePathCallback: ValueCallback<Array<Uri>>?,
                fileChooserParams: FileChooserParams?
            ): Boolean {
                mUploadCallback = filePathCallback
                //使用拍照或者打开文件
                mImageUri = ChoosePhotoFile.takePhoto(mActivity)

                //设置false会IllegalStateException: Duplicate showFileChooser result
                return true
            }
        }
    }

    fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
        LogUtils.d(
            TAG,
            "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
        )
        // 扫描二维码/条码回传
        if (requestCode == ScanCodeUtils.REQUEST_CODE_SCAN && resultCode == Activity.RESULT_OK) {
            LogUtils.d(TAG, "onActivityResultResponse ${intent?.extras}")
            if (intent == null) {
                //弹出展示链接
                showToast("扫描结果为空")
                return
            }
            //传递给js，格式是"scanCodeResult('${data.extras}')"，其中单引号很重要，可能导致js script error
            //codedContent是组件中定义的参数名
            setEvaluateJavascript("scanCodeResult('${intent.getStringExtra("codedContent")}')")
        } else if (requestCode == ChoosePhotoFile.REQUEST_CODE) {
            //拍照，界面跳回后，结果文件的使用
            ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)
        }

    }


    @Override
    override fun onDestroy() {
        //防止更新dialog内存泄漏
        super.onDestroy()
    }

    /**
     * 登录成功后跳转
     */
    open fun loginSuccessJump() {

    }

    /**
     * 给网页传值
     * 传递给js，格式是"scanCodeResult('${data.extras}')"
     * 其中单引号很重要，可能导致js script error
     */
    private fun setEvaluateJavascript(jspMethodAndValue: String) {
        LogUtils.d(
            TAG,
            "setEvaluateJavascript mWebView ${mWebView}, jspMethodAndValue $jspMethodAndValue"
        )
        mWebView?.evaluateJavascript(jspMethodAndValue, ValueCallback<String>() {
            LogUtils.d(TAG, "给网页传值为: $jspMethodAndValue")
        })
    }
}

android layout布局

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/main_web_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

2.获取照片的主要思路是两个方法：

  • webView官方打开文件选取方法onShowFileChooser，把网页回传文件
        //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
        mWebView?.webChromeClient = object : WebChromeClient() {
            //API >=21(android 5.0.1)回调此方法
            override fun onShowFileChooser(
                webView: WebView?,
                filePathCallback: ValueCallback<Array<Uri>>?,
                fileChooserParams: FileChooserParams?
            ): Boolean {
                mUploadCallback = filePathCallback
                //使用拍照或者打开文件
                mImageUri = ChoosePhotoFile.takePhoto(mActivity)

                //设置false会IllegalStateException: Duplicate showFileChooser result
                return true
            }
        }
  • 拍照或者相册选中后界面跳回后，使用ValueCallback<Array>回传
    fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
        LogUtils.d(
            TAG,
            "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
        )
		 if (requestCode == ChoosePhotoFile.REQUEST_CODE) {
            //拍照或者相册选中后界面跳回后，结果文件的使用
            ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)
        }

    }
  • 以上onActivityResultResponse方法需要在actvity onActivityResult方法中使用
    （因为我这里是activity嵌套fragment的,如果直接在activity使用webview就不需我这太麻烦）
    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        LogUtils.d(
            TAG,
            "onActivityResult requestCode11 $requestCode, resultCode：$resultCode"
        )
        //设置当前fragment
        val fragment = mDashboardViewModel.fragment.value
        Log.d(TAG, "fragment: $fragment")
        Log.d(TAG, "fragment.isResumed: ${fragment?.isResumed}")
        //界面返回时VisitorFragment还没有Resumed
        if (fragment is VisitorFragment) {
            val visitorFragment: VisitorFragment = fragment
            visitorFragment.onActivityResultResponse(requestCode, resultCode, data)
        }
    }

3.打开相机和相册的工具类

object ChoosePhotoFile {
    private const val TAG = "ChoosePhotoFile"
    const val REQUEST_CODE: Int = 12345

    fun takePhoto(activity: Activity): Uri {
        //相机可以访问的公共位置才能存储，获取时需要读取文件权限
        val file: String =
            Environment.getExternalStorageDirectory()
                .toString() + File.separator + Environment.DIRECTORY_PICTURES + File.separator
        val fileName = "Image_${SimpleDateFormat("yyyyMMdd_HHmmss").format(Date())}.jpg"
        val realFile = File(file, fileName)
        val imageUri = Uri.fromFile(realFile)
        LogUtils.d(TAG, "realFile：$realFile, imageUri: $imageUri")
        // 拍照后获取图片需要文件权限，界面跳转直接拿文件不需要权限
        //检查申请读文件权限
        CheckPermissionUtils.requestPermissions(
            activity,
            arrayOf(Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA)
        )

        //调起相机,拍一张照片
        val captureIntent = Intent(MediaStore.ACTION_IMAGE_CAPTURE)
        captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri)
        //调起相册，取一张照片
        val photoIntent = Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
        //选择方式，拍照或者相册
        val chooserIntent = Intent.createChooser(photoIntent, "Image Chooser")
        chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, arrayOf<Parcelable>(captureIntent))
        activity.startActivityForResult(chooserIntent, REQUEST_CODE)
        return imageUri
    }

    /**
     * H5针对从拍照或者相册中选中的图片做处理
     * @param imageUri 拍照返回的数据，
     */

    fun takeActivityResult(
        requestCode: Int,
        intent: Intent?,
        filePathCallback: ValueCallback<Array<Uri>>?,
        imageUri: Uri?
    ) {
        if (requestCode == REQUEST_CODE) {
            //从相册获取，返回的intent
            if (intent != null && intent.data != null) {
                var uri: Uri = intent.data as Uri
                LogUtils.d(TAG, "file uri: $uri")
                filePathCallback?.onReceiveValue(arrayOf<Uri>(uri))
            } else {
                //从拍照中获取图片，已经返回的imageUri
                LogUtils.d(TAG, "take photo imageUri: $imageUri")
                if (imageUri != null) {
                    filePathCallback?.onReceiveValue(arrayOf<Uri>(imageUri))
                } else {
                    filePathCallback?.onReceiveValue(null)
                }
            }
        }
    }
}
方式二：使用android 组件库是实现-朋友圈获取照片功能

实际效果和流程示图
在这里插入图片描述
1.获取照片的主要思路是两个方法-替换

  • webView官方打开文件选取方法onShowFileChooser，把网页回传文件
        //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
        mWebView?.webChromeClient = object : WebChromeClient() {
            //API >=21(android 5.0.1)回调此方法
            override fun onShowFileChooser(
                webView: WebView?,
                filePathCallback: ValueCallback<Array<Uri>>?,
                fileChooserParams: FileChooserParams?
            ): Boolean {
                mUploadCallback = filePathCallback
                //使用拍照或者打开文件
//                mImageUri = ChoosePhotoFile.takePhoto(mActivity)
                //模拟微信朋友圈获取照片模式
                LogUtils.d(TAG,"onShowFileChooser")
                PictureSelectorUtils.startPictureSelector(mActivity)

                //设置false会IllegalStateException: Duplicate showFileChooser result
                return true
            }
        }
  • 拍照或者相册选中后界面跳回后，使用ValueCallback<Array>回传
    fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
        LogUtils.d(
            TAG,
            "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
        )
		 if (requestCode == PictureSelectorUtils.REQUEST_PICTURE_SELECTOR) {
            LogUtils.d(TAG, "onActivityResultResponse REQUEST_PICTURE_SELECTOR")
            PictureSelectorUtils.takeActivityResult(requestCode, intent, mUploadCallback)
        }

    }

2.打开相机和相册的工具类

object PictureSelectorUtils {
    const val REQUEST_PICTURE_SELECTOR = 10012
    const val TAG = "PictureSelectorUtils"

    fun startPictureSelector(activity: Activity) {
        LogUtils.d(TAG, "startPictureSelector")
        // 拍照后获取图片需要文件权限，界面跳转直接拿文件不需要权限
        //检查申请读文件权限
//        CheckPermissionUtils.requestPermissions(
//            activity,
//            arrayOf(
//                Manifest.permission.CAMERA,
//                Manifest.permission.READ_EXTERNAL_STORAGE,
//                Manifest.permission.WRITE_EXTERNAL_STORAGE
//            )
//        )
        //插件里自带了静态权限以及权限校验
        PictureSelector.create(activity).openGallery(PictureMimeType.ofImage())
            .imageEngine(GlideEngine) // Please refer to the Demo GlideEngine.java
            .isWeChatStyle(true) // 是否开启微信图片选择风格
            .selectionMode(PictureConfig.MULTIPLE).forResult(REQUEST_PICTURE_SELECTOR)
    }

    fun getPictures(data: Intent): MutableList<Uri> {
        val selectList = PictureSelector.obtainMultipleResult(data)
        LogUtils.d(TAG, "getPicture selectList: $selectList")
        // 将照片路径转换成 Uri 列表
        val imageUris: MutableList<Uri> = ArrayList()
        if (selectList.isEmpty()) {
            LogUtils.d(TAG, "getPicture selectList isEmpty")
            return imageUris
        }
        for (imagePath in selectList) {
            var path = imagePath.path
            LogUtils.d(TAG, "path: $path")

            val uri = Uri.parse(path)
            LogUtils.d(TAG, "uri: $uri")
            imageUris.add(uri)
        }
        LogUtils.d(TAG, "imageUris: ${imageUris.toString()}")
        return imageUris
    }

    /**
     * H5针对从文件钟选中的图片做处理
     */
    fun takeActivityResult(
        requestCode: Int,
        intent: Intent?,
        filePathCallback: ValueCallback<Array<Uri>>?,
    ) {
        if (requestCode == REQUEST_PICTURE_SELECTOR) {

            val selectList = PictureSelector.obtainMultipleResult(intent)
            LogUtils.d(TAG, "getPicture selectList: $selectList")
            // 将照片路径转换成 Uri 列表
            val imageUris: MutableList<Uri> = ArrayList()
            if (selectList.isEmpty()) {
                LogUtils.d(TAG, "getPicture selectList isEmpty")
                filePathCallback?.onReceiveValue(null)
                return
            }
            for (imagePath in selectList) {
                var path = imagePath.path
                LogUtils.d(TAG, "path: $path")

                val uri = Uri.parse(path)
                LogUtils.d(TAG, "uri: $uri")
                imageUris.add(uri)
            }
            LogUtils.d(TAG, "imageUris: ${imageUris.toString()}")
            filePathCallback?.onReceiveValue(imageUris.toTypedArray())
        }
    }

}

其中使用第三方组件库-实现类似朋友圈获取照片的样式，需要引入一下依赖

    //照片获取类微信朋友圈
    implementation 'com.github.LuckSiege.PictureSelector:picture_library:v2.6.0'

拍照后获取图片需要文件权限，界面跳转直接拿文件不需要权限,且第三方插件库里自带了静态权限以及权限请求

3.我完整的代码——类似朋友圈获取界面逻辑

class VisitorFragment : Fragment() {

    private lateinit var binding: FragmentVisitorBinding
    lateinit var mActivity: Activity
    private lateinit var mRoot: View

    companion object {
        const val TAG = "VisitorFragment"
    }

    private var mWebViewUrl: String = "file:///android_asset/vue_android_demo.html"

    var mAppName = MainApplication.instance.configuration.BASE_APP_LOGIN_IDENTITY
    var mSystemName = WebViewConstant.DEFAULT_SYSTEM_NAME
    private var mVisitorAndroidJs: VisitorAndroidJs = VisitorAndroidJs(this)

    private var mWebView: WebView? = null
    var mAndroidId: String = WebViewConstant.DEFAULT_DEVICE_SIGN
    var mApiKey: String = WebViewConstant.DEFAULT_API_KEY

    //回传H5时使用的对象
    private var mUploadCallback: ValueCallback<Array<Uri>>? = null

    //拍照传递的路径uri
    private var mImageUri: Uri? = null


    /**
     * onCreate方法是Activity生命周期的第一个回调方法
     * ，当Activity被创建时被调用。
     * 在这个方法中，你可以进行一些初始化的操作，比如设置布局、绑定控件、初始化数据等。
     *
     * @param savedInstanceState If the fragment is being re-created from
     * a previous saved state, this is the state.
     */
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = FragmentVisitorBinding.inflate(layoutInflater)
        mRoot = binding.root
        //记录
        val viewModel = ViewModelProvider(requireActivity())[DashboardViewModel::class.java]
        viewModel.setFragment(this)

        LogUtils.d(TAG, "onCreate")
    }

    /**
     * onCreateView方法是Fragment生命周期的回调方法，
     * 当Fragment创建并绘制其用户界面时被调用。
     * 在这个方法中，你可以通过返回一个View对象来定义Fragment的用户界面。
     * 它常用于加载布局文件、查找和初始化控件等操作。
     *
     * @return
     */
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        LogUtils.d(TAG, "onCreateView")
        initView(mRoot, layoutInflater, null)
        return mRoot
    }

    fun initView(parent: View?, inflater: LayoutInflater?, container: ViewGroup?) {
        //设置当前fragment
        mAndroidId = DeviceUtils.getUniqueId(mActivity)
        initWebView()
        mWebView?.loadUrl(mWebViewUrl)
        //弹出展示链接
        showToast("${getString(R.string.current_develop_environment)}$mWebViewUrl")
        initData()
    }

    override fun onAttach(context: Context) {
        super.onAttach(context)
        mActivity = context as Activity
    }

    /**
     * @param msg 内容
     */
    fun showToast(msg: String?) {
        val activity: Activity? = activity
        activity?.runOnUiThread {
            Toast.makeText(
                activity,
                msg,
                Toast.LENGTH_SHORT
            ).show()
        }
    }


    private fun initData() {

    }

    override fun onResume() {
        super.onResume()
        LogUtils.d(TAG, "onResume")
    }

    @SuppressLint("SetJavaScriptEnabled")
    private fun initWebView() {
        LogUtils.d(TAG, "initWebView")
        mWebView = binding.mainWebView

        mWebView?.requestFocus()
        mWebView?.isHorizontalScrollBarEnabled = false
        mWebView?.isVerticalScrollBarEnabled = false


        val setting = mWebView?.settings
        setting?.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW;
        setting?.javaScriptEnabled = true
        //用于开启或禁用其 DOM（文档对象模型）存储功能，浏览器缓存这些数据
        setting?.domStorageEnabled = true
        //允许访问文件，默认允许
        setting?.allowFileAccess = true
        //设置不，会引起webView重新不急，默认NARROW_COLUMNS
        setting?.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
        //自动缩放
        setting?.setSupportZoom(true)
        setting?.builtInZoomControls = true
        //自适应屏幕
        setting?.useWideViewPort = true
        setting?.loadWithOverviewMode = true
        //支持多窗口
        setting?.setSupportMultipleWindows(true)
        setting?.setAppCacheEnabled(true)
        setting?.domStorageEnabled = true
        //定位
        setting?.setGeolocationEnabled(true)
        //优先使用缓存数据，在缓存数据不存在的情况下才去获取网络数据
        setting?.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
        setting?.savePassword = false

        //设置js接口
        mVisitorAndroidJs.let { mWebView?.addJavascriptInterface(it, "android") }
        //页面不跳转浏览器
        mWebView?.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                LogUtils.d(TAG, "url： $url")
                view.loadUrl(url)
                return true
            }

            override fun shouldInterceptRequest(
                view: WebView,
                request: WebResourceRequest
            ): WebResourceResponse? {
                var uri = request.url
                var path = uri.path
                LogUtils.d(TAG, "uri: $uri, path: $path")
                return super.shouldInterceptRequest(view, request)
            }
        }


        //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
        mWebView?.webChromeClient = object : WebChromeClient() {
            //API >=21(android 5.0.1)回调此方法
            override fun onShowFileChooser(
                webView: WebView?,
                filePathCallback: ValueCallback<Array<Uri>>?,
                fileChooserParams: FileChooserParams?
            ): Boolean {
                mUploadCallback = filePathCallback
                //使用拍照或者打开文件
//                mImageUri = ChoosePhotoFile.takePhoto(mActivity)
                //模拟微信朋友圈获取照片模式
                LogUtils.d(TAG,"onShowFileChooser")
                PictureSelectorUtils.startPictureSelector(mActivity)

                //设置false会IllegalStateException: Duplicate showFileChooser result
                return true
            }
        }
    }

    fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
        LogUtils.d(
            TAG,
            "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
        )
        // 扫描二维码/条码回传
        if (requestCode == ScanCodeUtils.REQUEST_CODE_SCAN && resultCode == Activity.RESULT_OK) {
            LogUtils.d(TAG, "onActivityResultResponse ${intent?.extras}")
            if (intent == null) {
                //弹出展示链接
                showToast("扫描结果为空")
                return
            }
            //传递给js，格式是"scanCodeResult('${data.extras}')"，其中单引号很重要，可能导致js script error
            //codedContent是组件中定义的参数名
            setEvaluateJavascript("scanCodeResult('${intent.getStringExtra("codedContent")}')")
//        } else if (requestCode == ChoosePhotoFile.REQUEST_CODE) {
//            //拍照，界面跳回后，结果文件的使用
//            ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)
        } else if (requestCode == PictureSelectorUtils.REQUEST_PICTURE_SELECTOR) {
            LogUtils.d(TAG, "onActivityResultResponse REQUEST_PICTURE_SELECTOR")
            PictureSelectorUtils.takeActivityResult(requestCode, intent, mUploadCallback)
        }

    }


    @Override
    override fun onDestroy() {
        //防止更新dialog内存泄漏
        super.onDestroy()
    }

    /**
     * 登录成功后跳转
     */
    open fun loginSuccessJump() {

    }

    /**
     * 给网页传值
     * 传递给js，格式是"scanCodeResult('${data.extras}')"
     * 其中单引号很重要，可能导致js script error
     */
    private fun setEvaluateJavascript(jspMethodAndValue: String) {
        LogUtils.d(
            TAG,
            "setEvaluateJavascript mWebView ${mWebView}, jspMethodAndValue $jspMethodAndValue"
        )
        mWebView?.evaluateJavascript(jspMethodAndValue, ValueCallback<String>() {
            LogUtils.d(TAG, "给网页传值为: $jspMethodAndValue")
        })
    }
}

三、总结一下

  • H5调用公共获取图片文件方法，
  • 在android手机端，H5主要依赖Webview,
  • 这边在webview声明并重写该方法onShowFileChooser
  • 使用工具类打开相机或相册，可以两种方式安卓原生方式或者利用第三方组件库方式
  • 选中图片，返回uri列表给H5
  • H5收到uri照片列表，并且使用前端方式展示

创造价值，乐哉分享！

☆七年
关注
专栏目录
android webview调用系统相机和图库
12-10
android webview调用系统相机和图库支持5.0通过了小米2s（android5.0.2）小米4（android 4.4.4）还有LG的nexus（android 5.0）的测试，在三星GT-I9300I（android 4.3 在这款手机上测试的时候，拍照后有的时候在webview上显示不出来，不知道是不是重写了 mWebView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { // TODO Auto-generated method stub return super.shouldOverrideUrlLoading(view, url); } @Override public void onPageStarted(WebView view, String url, Bitmap favicon) { // TODO Auto-generated method stub super.onPageStarted(view, url, favicon); } @Override public void onPageFinished(WebView view, String url) { // TODO Auto-generated method stub super.onPageFinished(view, url); } });）这个的原因
前端H5获取Android原生相册文件和拍照功能直接重新WebView的方法即可
03-06
前端H5获取Android原生相册文件和拍照功能,比如H5的<input type>类型，ios不用做任何处理，而Android需要对webview重新
HTML5实现本地摄像头拍照与照片上传教程
最新发布
weixin_30633869的博客
10-01 1138
本文还有配套的精品资源，点击获取 简介：HTML5通过 <input type="file"> 标签及其 capture 属性，允许网页调用本地摄像头进行拍照，提升了用户交互体验。本文将详细介绍如何使用HTML5和JavaScript构建一个调用本地摄像头拍照并上传照片的网页应用，包括实现照片的实时预览和发送图片数据到服务器的过程。同...
深坑之Webview,解决H5调用android相机拍照和录像
热门推荐
villa_mou的博客
12-06 8万+
最近在开发过程中遇到一个问题,主要是调用第三方的实名认证,需要拍照和录像,办过支付宝大宝卡和腾讯的大王卡的都知道这玩意,办卡的时候就需要进行实名认证,人脸识别 本来第三方平台(xxx流量公司)说的是直接用WebView加载这个H5界面就完事了,我心想这么简单,那不是分分钟的事,放着后面做(公司就我一个安卓,所以开发都是我说的算^_^,独立开发有的时候还是挺爽) 结
webview 嵌入H5网页支持 拍照、录像、文件选择等功能
黑夜骑士
03-05 1393
在日常开发中，app中经常有嵌入前端网页的需求，里面如果有一些调用相机拍照、录视频、查看本地图片功能时，需要Android WebView端做一些配置、来保证能顺利调起相应的Intent，来适配前端程序需求一：webView端调用相机拍照，同时回传给前端程序@Override//数据回传会用到，记录成全局= null) {//最终通过fileChooserParams.isCaptureEnabled()方法来解决你的困惑 官方解释是否为设备//所以这里写调用相机逻辑} else {
Android WebView及WebView的神坑之旅
豆子的博客
03-27 4159
WebView的一些神坑最近在开发过程中遇到一个问题,主要是WebView页面，需要调用本地相机拍照及图库，遇到一系列的神坑，这里结合本人所查阅的资料给大家一一说明。进入正题,首先来了解webview,这里我分享两篇大佬的博客1.WebView开车指南2.WebView详解3.WebView深坑之旅本人也是首次使用H5页面调用相机及图库，本以为只要将页面展示就可以，其他的都是前端的事情，我还能偷偷...
H5实现调用手机摄像头相册。完美实现图片压缩、预览、删除的功能。---Demo
08-16
H5实现调用手机摄像头相册。完美实现图片压缩、预览、删除的功能。
关于android webview调用相册和相机
u011811983的博客
12-10 7615
android webView 调用系统相册和相机 这里我只展示选择图库的代码，调用相册和相机的完整代码到这里下载点击打开链接 private ValueCallback mFilePathCallback; private ValueCallback mUploadCallbackAboveL; @Deprecated // Android 调用这个方法
h5调用手机相册摄像头以及文件夹
weixin_30794491的博客
03-09 331
在之前一家公司的时候要做一个app里面有上传头像的功能，当时研究了好久，找到了一篇文章关于h5摄像头以及相册的调用的，所以就解决了这个问题了！！我这里记录一下以便后面有人需要，可以参考一下！！！！ 下面是完整的一个HTML页面内容，放在服务器上然后浏览就可以了，只支持Chrome和Safari核的浏览器，QQ浏览器，Chrome，Safari浏览器都可以。在不同的手机和浏览器上面展现的方式不一样...
Android WebView 选择图片并上传（调用相机拍照/相册/选择文件）
WL-鬼
07-20 1万+
前言： 这个功能其实我才刚接触。不熟...在这个给大家提供的都是经过本人验证之后的一些案例。可以在项目中跑的。 最近项目嵌入混合开发，都是使用WebView来跳转，页面展示。有用到这个图片上传的功能。 原本是一脸懵的，查了很多资料看一些大神都写的很多代码很复杂（原谅我是小白） 正文： 先看一下效果先： 代码： 我这里代码都是写在Fragment里面的 直接...
关于如何用H5调起手机相机并且拍照 (TO ppj)
yangxbai的博客
01-12 4117
关于如何用H5调起手机相机并且拍照
h5调用手机相册，摄像头以及文件夹
09-26
h5调用手机相册，摄像头以及文件夹，直接放在服务器上然后浏览就可以了。 QQ浏览器，Chrome，Safari浏览器都可以。
Android webview调用相机和相册
03-31
Android中使用WebView调用系统相机和相册，但是4.4的手机不能使用
Android webView拍照与展示相册图片
09-04
Android webView拍照与展示相册图片,具体可以查看：https://blog.csdn.net/a748448660/article/details/82389904
Android——UI篇：WebView里调用相机/文件选取照片并上传。
qq_35373333的博客
03-15 7286
        最近的开发项目中有一个需求，就是在嵌入webview上，需要在webview端来调起本地的相机拍照，或者调起本地文件选择图片并上传到服务器，当然上传这一块的接口是Web端的事情啦，所以我们只管把我们拍照/选取文件的文件地址传给webview端，就可以了，因为我也是刚工作没多久，这个需求以前也是从没接触过，所以这些东西也是从网上参考过来的，然后经过自己的修改，最后测试成功。     ...
发布成H5后，uni.chooseImage/taro.chooseImage方法在android WebView上无法使用
07-11
这是因为这两种库通常针对原生环境设计，用于获取设备相册或摄像头权限，而在WebView中它们并不能直接调用系统级功能。 原因有两方面： 1. **安全限制**：WebView受限于浏览器的安全模型，它不会允许JavaScript...
web、app、H5、小程序测试的区别
qq_38889350的博客
08-13 2406
单纯从功能层面来说，app测试、web测试和H5测试在功能测试上没什么区别。 web项目或者pc项目都是电脑上进行测试的，常见的pc项目由BS架构和CS架构，BS架构就是通过浏览器（browser）请求后台服务（server），后台返回的相应内容显示在浏览器上，常见BS架构的项目有天猫、京东等浏览器输入网址就可以访问。CS架构的项目有QQ、微信等，需要在电脑上下载客户端（client），客户端与后台服务器（server）进行数据交互。基于以上信息，PC测试都是在电脑上。而app测试平台分为安卓和IO..
mui h5+文档最详版
zxd的博客
12-10 1万+
mui h5+文档最详版界面初始化H5plus初始化创建子页面打开界面参数传递控制页面load显示关闭界面底部导航切换界面自定义事件页面预加载消息框原生模式ActionSheet下拉刷新上拉加载上拉下拉整合手势遮罩滑动导航选择图片轮播自定义导航Ajax-get请求Ajax-post请求照相机访问相册蜂鸣提示音手机震动弹出菜单设备信息手机信息发送短信拨打电话发送邮件本地存储图片上传地理位置设置IOS...
iOS webView的高级用法之JS交互，js与oc的相互调用（JavaScriptCore）
horisea的博客
08-12 2万+
重要的事情放前面 github地址：https://github.com/horisea/JSCallOCTest   欢迎star   前言：说起JS交互，很多童鞋会黯然色变，感觉很高深的样子。大部分小伙伴只知道一种，哪一种我也说说吧。    1.在webView中将要请求的时候，拦截URL，进行重定向，然而该场景实用有限，网上资料也很多下面说说另一种交互方式。 - (BOOL)webV...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值