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

铁佛  金牌会员 | 2024-6-11 13:01:09 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 663|帖子 663|积分 1989

需求目的： 手机机通过webView展示H5网页，在特殊场景下，需要使用相机照相或者从相册获取照片，上传背景。
完备流程效果： 如下图

一、H5界面样例代码

使用html文件格式，文件直接打开就可以展示布局；一会在andriod webview中直接加载
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <div id="app">
  11.     <h1>alllalalallalal 默认会被覆盖</h1>
  12. </div>
  13. <template id="why">
  14.     <div>
  15.         <h2>{{message}}</h2>
  16.         <h2>{{counter}}</h2>
  17.         <button @click="increment">+1</button>
  18.         <button @click="decrement">-1</button>
  20.         <h1 style="text-align: center;">{{ title }}</h1>
  21.         <div>
  22.             <h2 style="text-align: center;">android选中照片H5展示</h2>
  23.             <!--HTML5提供了<input type="file">元素来实现选取文件的功能,在WebView表现为调用onShowFileChooser-->
  24.             <input accept="image/*" capture="camera" ref="imgFile" type="file" multiple
  25.                    @change="previewFiles">
  26.             <div id="preview">
  27.                 <img v-for="imgSrc in imageSources" :src="imgSrc" :key="imgSrc"
  28.                      style="max-width: 100px; max-height: 100px; margin: 10px;">
  29.             </div>
  30.         </div>
  31.     </div>
  32. </template>
  35. <body>
  36. <!-- 引入 Vue 3 的 CDN 资源网络加载不了 -->
  37. <!-- <script src="https://unpkg.com/vue@next"></script> -->
  38. <!-- 引入 Vue 3 的 CDN 资源,本地引用 -->
  39. <script src="vue3.2.12global.js"></script>
  40. <script>
  41.         Vue.createApp({
  42.             template: '#why',
  43.             data: function () {
  44.                 return {
  45.                     message: "功能开发中，敬请期待！",
  46.                     counter: 100,
  47.                     pictureSelectorContent: "相机选择结果:",
  48.                     imageSources: [] // 存储图片的数据URL
  49.                 }
  50.             },
  52.             // 在你的 Vue 组件中处理 Webview 传递的数据
  53.             mounted() {
  54.                 // 设置全局函数，用于接收 WebView 调用
  55.                 // window.pictureSelectorResult = this.pictureSelectorResult;
  56.             },
  57.             methods: {
  58.                 increment() {
  59.                     this.counter++;
  60.                     console.log("点击了+1");
  61.                 },
  62.                 decrement() {
  63.                     this.counter--;
  64.                     consloe.log("点击了-1");
  65.                 },
  66.                 startPictureSelector() {
  67.                     window.android.startPictureSelector();
  68.                 },
  69.                 previewFiles() {
  70.                     const files = this.$refs.imgFile.files;
  71.                     this.imageSources = [];
  73.                     for (let i = 0; i < files.length; i++) {
  74.                         const file = files[i];
  75.                         const reader = new FileReader();
  77.                         reader.onload = (e) => {
  78.                             this.imageSources.push(e.target.result);
  79.                         };
  81.                         reader.readAsDataURL(file);
  82.                     }
  83.                 },
  84.             },
  87.         }).mount("#app")
  91. </script>
  92. <style>
  93.         h1 {
  94.             font-size: 80px;
  95.             font-weight: bold;
  96.             margin-bottom: 20px;
  97.         }
  99.         h2 {
  100.             font-size: 20px;
  101.             font-weight: bold;
  102.             color: #C8EFD4;
  103.         }
  105.         h3 {
  106.             font-size: 10px;
  107.             font-weight: bold;
  108.             color: #C8EFD4;
  109.         }
  111.         button1 {
  112.             font-size: 60px;
  113.             padding: 10px 20px;
  114.             background-color: #007bff;
  115.             color: #fff;
  116.             border: none;
  117.             border-radius: 4px;
  118.             cursor: pointer;
  119.             margin-bottom: 20px;
  120.             margin-top: 20px;
  121.             text-align: center;
  122.             /* 将文字水平居中显示 */
  123.             display: flex;
  124.             /* 将按钮设置为flex容器 */
  125.             align-items: center;
  126.             /* 将文字在垂直方向上居中显示 */
  127.         }
  130. </style>
  131. </body>
  133. </html>
复制代码
上述代码是前端代码，使用vue3框架展示一个基础 加减demo界面（不紧张的冗余），以及 一个打开文件的按钮以及展示图片

此中HTML5提供了元素来实现选取文件的功能，当在WebView表现为调用onShowFileChooser后，回调图片uri列表一一获取并展示
二、Android打开相机以及相册的两种方式

方式一：android 原生方式

现实效果和流程示图

1.android界面逻辑代码
这边使用的是kotlin语言，使用的fragment界面展示,使用binding加载了布局，以及声明白webview组件，在webview上导入html链接，使当地H5界面展示
  2. class VisitorFragment : Fragment() {
  4.     private lateinit var binding: FragmentVisitorBinding
  5.     lateinit var mActivity: Activity
  6.     private lateinit var mRoot: View
  8.     companion object {
  9.         const val TAG = "VisitorFragment"
  10.     }
  12.     private var mWebViewUrl: String = "file:///android_asset/vue_android_demo.html"
  14.     var mAppName = MainApplication.instance.configuration.BASE_APP_LOGIN_IDENTITY
  15.     var mSystemName = WebViewConstant.DEFAULT_SYSTEM_NAME
  16.     private var mVisitorAndroidJs: VisitorAndroidJs = VisitorAndroidJs(this)
  18.     private var mWebView: WebView? = null
  19.     var mAndroidId: String = WebViewConstant.DEFAULT_DEVICE_SIGN
  20.     var mApiKey: String = WebViewConstant.DEFAULT_API_KEY
  22.     //回传H5时使用的对象
  23.     private var mUploadCallback: ValueCallback<Array<Uri>>? = null
  25.     //拍照传递的路径uri
  26.     private var mImageUri: Uri? = null
  29.     /**
  30.      * onCreate方法是Activity生命周期的第一个回调方法
  31.      * ，当Activity被创建时被调用。
  32.      * 在这个方法中，你可以进行一些初始化的操作，比如设置布局、绑定控件、初始化数据等。
  33.      *
  34.      * @param savedInstanceState If the fragment is being re-created from
  35.      * a previous saved state, this is the state.
  36.      */
  37.     override fun onCreate(savedInstanceState: Bundle?) {
  38.         super.onCreate(savedInstanceState)
  39.         binding = FragmentVisitorBinding.inflate(layoutInflater)
  40.         mRoot = binding.root
  41.         //记录
  42.         val viewModel = ViewModelProvider(requireActivity())[DashboardViewModel::class.java]
  43.         viewModel.setFragment(this)
  45.         LogUtils.d(TAG, "onCreate")
  46.     }
  48.     /**
  49.      * onCreateView方法是Fragment生命周期的回调方法，
  50.      * 当Fragment创建并绘制其用户界面时被调用。
  51.      * 在这个方法中，你可以通过返回一个View对象来定义Fragment的用户界面。
  52.      * 它常用于加载布局文件、查找和初始化控件等操作。
  53.      *
  54.      * @return
  55.      */
  56.     override fun onCreateView(
  57.         inflater: LayoutInflater,
  58.         container: ViewGroup?,
  59.         savedInstanceState: Bundle?
  60.     ): View {
  61.         LogUtils.d(TAG, "onCreateView")
  62.         initView(mRoot, layoutInflater, null)
  63.         return mRoot
  64.     }
  66.     fun initView(parent: View?, inflater: LayoutInflater?, container: ViewGroup?) {
  67.         //设置当前fragment
  68.         mAndroidId = DeviceUtils.getUniqueId(mActivity)
  69.         initWebView()
  70.         mWebView?.loadUrl(mWebViewUrl)
  71.         //弹出展示链接
  72.         showToast("${getString(R.string.current_develop_environment)}$mWebViewUrl")
  73.         initData()
  74.     }
  76.     override fun onAttach(context: Context) {
  77.         super.onAttach(context)
  78.         mActivity = context as Activity
  79.     }
  81.     /**
  82.      * @param msg 内容
  83.      */
  84.     fun showToast(msg: String?) {
  85.         val activity: Activity? = activity
  86.         activity?.runOnUiThread {
  87.             Toast.makeText(
  88.                 activity,
  89.                 msg,
  90.                 Toast.LENGTH_SHORT
  91.             ).show()
  92.         }
  93.     }
  96.     private fun initData() {
  98.     }
  100.     override fun onResume() {
  101.         super.onResume()
  102.         LogUtils.d(TAG, "onResume")
  103.     }
  105.     @SuppressLint("SetJavaScriptEnabled")
  106.     private fun initWebView() {
  107.         LogUtils.d(TAG, "initWebView")
  108.         mWebView = binding.mainWebView
  110.         mWebView?.requestFocus()
  111.         mWebView?.isHorizontalScrollBarEnabled = false
  112.         mWebView?.isVerticalScrollBarEnabled = false
  115.         val setting = mWebView?.settings
  116.         setting?.mixedContentMode = WebSettings.MIXED_CONTENT_ALWAYS_ALLOW;
  117.         setting?.javaScriptEnabled = true
  118.         //用于开启或禁用其 DOM（文档对象模型）存储功能，浏览器缓存这些数据
  119.         setting?.domStorageEnabled = true
  120.         //允许访问文件，默认允许
  121.         setting?.allowFileAccess = true
  122.         //设置不，会引起webView重新不急，默认NARROW_COLUMNS
  123.         setting?.layoutAlgorithm = WebSettings.LayoutAlgorithm.NARROW_COLUMNS
  124.         //自动缩放
  125.         setting?.setSupportZoom(true)
  126.         setting?.builtInZoomControls = true
  127.         //自适应屏幕
  128.         setting?.useWideViewPort = true
  129.         setting?.loadWithOverviewMode = true
  130.         //支持多窗口
  131.         setting?.setSupportMultipleWindows(true)
  132.         setting?.setAppCacheEnabled(true)
  133.         setting?.domStorageEnabled = true
  134.         //定位
  135.         setting?.setGeolocationEnabled(true)
  136.         //优先使用缓存数据，在缓存数据不存在的情况下才去获取网络数据
  137.         setting?.cacheMode = WebSettings.LOAD_CACHE_ELSE_NETWORK
  138.         setting?.savePassword = false
  140.         //设置js接口
  141.         mVisitorAndroidJs.let { mWebView?.addJavascriptInterface(it, "android") }
  142.         //页面不跳转浏览器
  143.         mWebView?.webViewClient = object : WebViewClient() {
  144.             override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
  145.                 LogUtils.d(TAG, "url： $url")
  146.                 view.loadUrl(url)
  147.                 return true
  148.             }
  150.             override fun shouldInterceptRequest(
  151.                 view: WebView,
  152.                 request: WebResourceRequest
  153.             ): WebResourceResponse? {
  154.                 var uri = request.url
  155.                 var path = uri.path
  156.                 LogUtils.d(TAG, "uri: $uri, path: $path")
  157.                 return super.shouldInterceptRequest(view, request)
  158.             }
  159.         }
  162.         //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
  163.         mWebView?.webChromeClient = object : WebChromeClient() {
  164.             //API >=21(android 5.0.1)回调此方法
  165.             override fun onShowFileChooser(
  166.                 webView: WebView?,
  167.                 filePathCallback: ValueCallback<Array<Uri>>?,
  168.                 fileChooserParams: FileChooserParams?
  169.             ): Boolean {
  170.                 mUploadCallback = filePathCallback
  171.                 //使用拍照或者打开文件
  172.                 mImageUri = ChoosePhotoFile.takePhoto(mActivity)
  174.                 //设置false会IllegalStateException: Duplicate showFileChooser result
  175.                 return true
  176.             }
  177.         }
  178.     }
  180.     fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
  181.         LogUtils.d(
  182.             TAG,
  183.             "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
  184.         )
  185.         // 扫描二维码/条码回传
  186.         if (requestCode == ScanCodeUtils.REQUEST_CODE_SCAN && resultCode == Activity.RESULT_OK) {
  187.             LogUtils.d(TAG, "onActivityResultResponse ${intent?.extras}")
  188.             if (intent == null) {
  189.                 //弹出展示链接
  190.                 showToast("扫描结果为空")
  191.                 return
  192.             }
  193.             //传递给js，格式是"scanCodeResult('${data.extras}')"，其中单引号很重要，可能导致js script error
  194.             //codedContent是组件中定义的参数名
  195.             setEvaluateJavascript("scanCodeResult('${intent.getStringExtra("codedContent")}')")
  196.         } else if (requestCode == ChoosePhotoFile.REQUEST_CODE) {
  197.             //拍照，界面跳回后，结果文件的使用
  198.             ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)
  199.         }
  201.     }
  204.     @Override
  205.     override fun onDestroy() {
  206.         //防止更新dialog内存泄漏
  207.         super.onDestroy()
  208.     }
  210.     /**
  211.      * 登录成功后跳转
  212.      */
  213.     open fun loginSuccessJump() {
  215.     }
  217.     /**
  218.      * 给网页传值
  219.      * 传递给js，格式是"scanCodeResult('${data.extras}')"
  220.      * 其中单引号很重要，可能导致js script error
  221.      */
  222.     private fun setEvaluateJavascript(jspMethodAndValue: String) {
  223.         LogUtils.d(
  224.             TAG,
  225.             "setEvaluateJavascript mWebView ${mWebView}, jspMethodAndValue $jspMethodAndValue"
  226.         )
  227.         mWebView?.evaluateJavascript(jspMethodAndValue, ValueCallback<String>() {
  228.             LogUtils.d(TAG, "给网页传值为: $jspMethodAndValue")
  229.         })
  230.     }
  231. }
复制代码
android layout布局
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  6.     <WebView
  7.         android:id="@+id/main_web_view"
  8.         android:layout_width="match_parent"
  9.         android:layout_height="match_parent" />
  11. </androidx.constraintlayout.widget.ConstraintLayout>
复制代码
2.获取照片的主要思路是两个方法：


  • webView官方打开文件选取方法onShowFileChooser，把网页回传文件
  1.         //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
  2.         mWebView?.webChromeClient = object : WebChromeClient() {
  3.             //API >=21(android 5.0.1)回调此方法
  4.             override fun onShowFileChooser(
  5.                 webView: WebView?,
  6.                 filePathCallback: ValueCallback<Array<Uri>>?,
  7.                 fileChooserParams: FileChooserParams?
  8.             ): Boolean {
  9.                 mUploadCallback = filePathCallback
  10.                 //使用拍照或者打开文件
  11.                 mImageUri = ChoosePhotoFile.takePhoto(mActivity)
  13.                 //设置false会IllegalStateException: Duplicate showFileChooser result
  14.                 return true
  15.             }
  16.         }
复制代码


  • 照相或者相册选中后界面跳回后，使用ValueCallback<Array>回传
  1.     fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
  2.         LogUtils.d(
  3.             TAG,
  4.             "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
  5.         )
  6.                  if (requestCode == ChoosePhotoFile.REQUEST_CODE) {
  7.             //拍照或者相册选中后界面跳回后，结果文件的使用
  8.             ChoosePhotoFile.takeActivityResult(requestCode, intent, mUploadCallback, mImageUri)
  9.         }
  11.     }
复制代码


  • 以上onActivityResultResponse方法需要在actvity onActivityResult方法中使用
    （由于我这里是activity嵌套fragment的,如果直接在activity使用webview就不需我这太贫苦）
  1.     override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
  2.         super.onActivityResult(requestCode, resultCode, data)
  3.         LogUtils.d(
  4.             TAG,
  5.             "onActivityResult requestCode11 $requestCode, resultCode：$resultCode"
  6.         )
  7.         //设置当前fragment
  8.         val fragment = mDashboardViewModel.fragment.value
  9.         Log.d(TAG, "fragment: $fragment")
  10.         Log.d(TAG, "fragment.isResumed: ${fragment?.isResumed}")
  11.         //界面返回时VisitorFragment还没有Resumed
  12.         if (fragment is VisitorFragment) {
  13.             val visitorFragment: VisitorFragment = fragment
  14.             visitorFragment.onActivityResultResponse(requestCode, resultCode, data)
  15.         }
  16.     }
复制代码
3.打开相机和相册的工具类
  1. object ChoosePhotoFile {
  2.     private const val TAG = "ChoosePhotoFile"
  3.     const val REQUEST_CODE: Int = 12345
  5.     fun takePhoto(activity: Activity): Uri {
  6.         //相机可以访问的公共位置才能存储，获取时需要读取文件权限
  7.         val file: String =
  8.             Environment.getExternalStorageDirectory()
  9.                 .toString() + File.separator + Environment.DIRECTORY_PICTURES + File.separator
  10.         val fileName = "Image_${SimpleDateFormat("yyyyMMdd_HHmmss").format(Date())}.jpg"
  11.         val realFile = File(file, fileName)
  12.         val imageUri = Uri.fromFile(realFile)
  13.         LogUtils.d(TAG, "realFile：$realFile, imageUri: $imageUri")
  14.         // 拍照后获取图片需要文件权限，界面跳转直接拿文件不需要权限
  15.         //检查申请读文件权限
  16.         CheckPermissionUtils.requestPermissions(
  17.             activity,
  18.             arrayOf(Manifest.permission.READ_EXTERNAL_STORAGE, Manifest.permission.CAMERA)
  19.         )
  21.         //调起相机,拍一张照片
  22.         val captureIntent = Intent(MediaStore.ACTION_IMAGE_CAPTURE)
  23.         captureIntent.putExtra(MediaStore.EXTRA_OUTPUT, imageUri)
  24.         //调起相册，取一张照片
  25.         val photoIntent = Intent(Intent.ACTION_PICK, MediaStore.Images.Media.EXTERNAL_CONTENT_URI)
  26.         //选择方式，拍照或者相册
  27.         val chooserIntent = Intent.createChooser(photoIntent, "Image Chooser")
  28.         chooserIntent.putExtra(Intent.EXTRA_INITIAL_INTENTS, arrayOf<Parcelable>(captureIntent))
  29.         activity.startActivityForResult(chooserIntent, REQUEST_CODE)
  30.         return imageUri
  31.     }
  33.     /**
  34.      * H5针对从拍照或者相册中选中的图片做处理
  35.      * @param imageUri 拍照返回的数据，
  36.      */
  38.     fun takeActivityResult(
  39.         requestCode: Int,
  40.         intent: Intent?,
  41.         filePathCallback: ValueCallback<Array<Uri>>?,
  42.         imageUri: Uri?
  43.     ) {
  44.         if (requestCode == REQUEST_CODE) {
  45.             //从相册获取，返回的intent
  46.             if (intent != null && intent.data != null) {
  47.                 var uri: Uri = intent.data as Uri
  48.                 LogUtils.d(TAG, "file uri: $uri")
  49.                 filePathCallback?.onReceiveValue(arrayOf<Uri>(uri))
  50.             } else {
  51.                 //从拍照中获取图片，已经返回的imageUri
  52.                 LogUtils.d(TAG, "take photo imageUri: $imageUri")
  53.                 if (imageUri != null) {
  54.                     filePathCallback?.onReceiveValue(arrayOf<Uri>(imageUri))
  55.                 } else {
  56.                     filePathCallback?.onReceiveValue(null)
  57.                 }
  58.             }
  59.         }
  60.     }
  61. }
复制代码
方式二：使用android 组件库是实现-朋侪圈获取照片功能

现实效果和流程示图

1.获取照片的主要思路是两个方法-替换


  • webView官方打开文件选取方法onShowFileChooser，把网页回传文件
  1.         //webView官方打开文件选取方法onShowFileChooser，把网页回传文件
  2.         mWebView?.webChromeClient = object : WebChromeClient() {
  3.             //API >=21(android 5.0.1)回调此方法
  4.             override fun onShowFileChooser(
  5.                 webView: WebView?,
  6.                 filePathCallback: ValueCallback<Array<Uri>>?,
  7.                 fileChooserParams: FileChooserParams?
  8.             ): Boolean {
  9.                 mUploadCallback = filePathCallback
  10.                 //使用拍照或者打开文件
  11. //                mImageUri = ChoosePhotoFile.takePhoto(mActivity)
  12.                 //模拟微信朋友圈获取照片模式
  13.                 LogUtils.d(TAG,"onShowFileChooser")
  14.                 PictureSelectorUtils.startPictureSelector(mActivity)
  16.                 //设置false会IllegalStateException: Duplicate showFileChooser result
  17.                 return true
  18.             }
  19.         }
复制代码


  • 照相或者相册选中后界面跳回后，使用ValueCallback<Array>回传
  1.     fun onActivityResultResponse(requestCode: Int, resultCode: Int, intent: Intent?) {
  2.         LogUtils.d(
  3.             TAG,
  4.             "onActivityResultResponse requestCode $requestCode, resultCode：$resultCode"
  5.         )
  6.                  if (requestCode == PictureSelectorUtils.REQUEST_PICTURE_SELECTOR) {
  7.             LogUtils.d(TAG, "onActivityResultResponse REQUEST_PICTURE_SELECTOR")
  8.             PictureSelectorUtils.takeActivityResult(requestCode, intent, mUploadCallback)
  9.         }
  11.     }
复制代码
2.打开相机和相册的工具类
  1. object PictureSelectorUtils {
  2.     const val REQUEST_PICTURE_SELECTOR = 10012
  3.     const val TAG = "PictureSelectorUtils"
  5.     fun startPictureSelector(activity: Activity) {
  6.         LogUtils.d(TAG, "startPictureSelector")
  7.         // 拍照后获取图片需要文件权限，界面跳转直接拿文件不需要权限
  8.         //检查申请读文件权限
  9. //        CheckPermissionUtils.requestPermissions(
  10. //            activity,
  11. //            arrayOf(
  12. //                Manifest.permission.CAMERA,
  13. //                Manifest.permission.READ_EXTERNAL_STORAGE,
  14. //                Manifest.permission.WRITE_EXTERNAL_STORAGE
  15. //            )
  16. //        )
  17.         //插件里自带了静态权限以及权限校验
  18.         PictureSelector.create(activity).openGallery(PictureMimeType.ofImage())
  19.             .imageEngine(GlideEngine) // Please refer to the Demo GlideEngine.java
  20.             .isWeChatStyle(true) // 是否开启微信图片选择风格
  21.             .selectionMode(PictureConfig.MULTIPLE).forResult(REQUEST_PICTURE_SELECTOR)
  22.     }
  24.     fun getPictures(data: Intent): MutableList<Uri> {
  25.         val selectList = PictureSelector.obtainMultipleResult(data)
  26.         LogUtils.d(TAG, "getPicture selectList: $selectList")
  27.         // 将照片路径转换成 Uri 列表
  28.         val imageUris: MutableList<Uri> = ArrayList()
  29.         if (selectList.isEmpty()) {
  30.             LogUtils.d(TAG, "getPicture selectList isEmpty")
  31.             return imageUris
  32.         }
  33.         for (imagePath in selectList) {
  34.             var path = imagePath.path
  35.             LogUtils.d(TAG, "path: $path")
  37.             val uri = Uri.parse(path)
  38.             LogUtils.d(TAG, "uri: $uri")
  39.             imageUris.add(uri)
  40.         }
  41.         LogUtils.d(TAG, "imageUris: ${imageUris.toString()}")
  42.         return imageUris
  43.     }
  45.     /**
  46.      * H5针对从文件钟选中的图片做处理
  47.      */
  48.     fun takeActivityResult(
  49.         requestCode: Int,
  50.         intent: Intent?,
  51.         filePathCallback: ValueCallback<Array<Uri>>?,
  52.     ) {
  53.         if (requestCode == REQUEST_PICTURE_SELECTOR) {
  55.             val selectList = PictureSelector.obtainMultipleResult(intent)
  56.             LogUtils.d(TAG, "getPicture selectList: $selectList")
  57.             // 将照片路径转换成 Uri 列表
  58.             val imageUris: MutableList<Uri> = ArrayList()
  59.             if (selectList.isEmpty()) {
  60.                 LogUtils.d(TAG, "getPicture selectList isEmpty")
  61.                 filePathCallback?.onReceiveValue(null)
  62.                 return
  63.             }
  64.             for (imagePath in selectList) {
  65.                 var path = imagePath.path
  66.                 LogUtils.d(TAG, "path: $path")
  68.                 val uri = Uri.parse(path)
  69.                 LogUtils.d(TAG, "uri: $uri")
  70.                 imageUris.add(uri)
  71.             }
  72.             LogUtils.d(TAG, "imageUris: ${imageUris.toString()}")
  73.             filePathCallback?.onReceiveValue(imageUris.toTypedArray())
  74.         }
  75.     }
  77. }
复制代码
此中使用第三方组件库-实现类似朋侪圈获取照片的样式，需要引入一下依赖
  1.     //照片获取类微信朋友圈
  2.     implementation 'com.github.LuckSiege.PictureSelector:picture_library:v2.6.0'
复制代码
照相后获取图片需要文件权限，界面跳转直接拿文件不需要权限,且第三方插件库里自带了静态权限以及权限哀求
3.我完备的代码——类似朋侪圈获取界面逻辑
  1. 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，把网页回传文件
  2.         mWebView?.webChromeClient = object : WebChromeClient() {
  3.             //API >=21(android 5.0.1)回调此方法
  4.             override fun onShowFileChooser(
  5.                 webView: WebView?,
  6.                 filePathCallback: ValueCallback<Array<Uri>>?,
  7.                 fileChooserParams: FileChooserParams?
  8.             ): Boolean {
  9.                 mUploadCallback = filePathCallback
  10.                 //使用拍照或者打开文件
  11. //                mImageUri = ChoosePhotoFile.takePhoto(mActivity)
  12.                 //模拟微信朋友圈获取照片模式
  13.                 LogUtils.d(TAG,"onShowFileChooser")
  14.                 PictureSelectorUtils.startPictureSelector(mActivity)
  16.                 //设置false会IllegalStateException: Duplicate showFileChooser result
  17.                 return true
  18.             }
  19.         }
  20.     }    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照片列表，而且使用前端方式展示
创造价值，乐哉分享！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

铁佛

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表