Android 轻松实现点击WebView链接中的图片同比例放大，长按保存本地

吕氏春秋i

于 2022-05-03 10:36:59 发布

阅读量1.3k

点赞数 1

分类专栏： Android进阶文章标签： android webview kotlin

本文链接：https://blog.csdn.net/Life_s/article/details/124551646

版权

Android进阶专栏收录该内容

120 篇文章 13 订阅

订阅专栏

前言

现在纯原生应用已经越来越少很多应用都是采用混合式开发 WebView 和 Javascript 进行交互
说到webView加载h5链接很多时候都是h5写好了网页内容 android端只负责加载就完事了
最近在研究webView加载h5链接时，看到一张很好看的gif图但是没有办法下载呀
因为内容是h5的 android无权限操作苦于烦恼怎么办呢？

怎么办喜欢就保存起来啊方便不时之需如何操作且看一步一步说明

效果

gif

忘记录相册了太麻烦了就不重新弄了截一张图说明下载成功的图
下面这张图就是刚刚从应用中的h5链接里下载的gif图

代码实现

先说下思路有2种方式可以实现这里都会介绍到
第一种是拦截http的url的请求通过判断endsWith来取图片地址
但是这张方式有一种弊端就是如果url不是以图片格式结尾那么这个方法就没法使用
比如https://inews.gtimg.com/newsapp_bt/0/14526974555/1000这张地址

URL拦截实现

 webView?.webViewClient = object : WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView, url: String): Boolean {
                if (url.endsWith(".jpg") || url.endsWith(".jpeg") || url.endsWith(".png")
                    || url.endsWith(".JPG") || url.endsWith(".JPEG") || url.endsWith(".PNG")
                ) {
                    openImageActivity(url)
                    return true
                }
                return super.shouldOverrideUrlLoading(view, url)
            }
        }

这里的openImageActivity

   private fun openImageActivity(url: String) {
        val bundle = Bundle()
        bundle.putString("imgUrl", url)
        toStartActivity(ShowWebImageActivity::class.java, bundle)
    }

与JS通信实现

我是用这种方法实现的也比较简单没有弊端无论你是图片格式结尾还是hmtl
都可以使用glide直接加载

webView配置

 		webView = mBind.webView
        // 设置允许JS弹窗
        webView?.settings?.javaScriptCanOpenWindowsAutomatically = true
        webView?.settings?.defaultTextEncodingName = "UTF-8"//防止乱码
        webView?.settings?.javaScriptEnabled = true
        webView?.settings?.useWideViewPort = true
        webView?.settings?.loadWithOverviewMode = true
        webView?.settings?.setSupportMultipleWindows(true)
        webView?.scrollBarStyle = View.SCROLLBARS_INSIDE_OVERLAY //设置滚动条样式
        // 最小缩放等级
        webView?.setInitialScale(100)

        //通过屏幕密度调整分辨率
        val screenDensity = resources.displayMetrics.densityDpi
        var zoomDensity = ZoomDensity.MEDIUM
        when (screenDensity) {
            DisplayMetrics.DENSITY_LOW -> zoomDensity = ZoomDensity.CLOSE
            DisplayMetrics.DENSITY_MEDIUM -> zoomDensity = ZoomDensity.MEDIUM
            DisplayMetrics.DENSITY_HIGH -> zoomDensity = ZoomDensity.FAR
        }
        webView?.settings?.textSize = WebSettings.TextSize.LARGER //设置字体号150%
        webView?.settings?.defaultZoom = zoomDensity

        //h5调用android
        webView?.addJavascriptInterface(JavaScriptInterface(this), "imagelistner")

        if (vurLink != null) {
            webView?.loadUrl(vurLink)
        }

主要代码是这句 webview与js通信
webView?.addJavascriptInterface(JavaScriptInterface(this), "imagelistner")

通过webView的onPageFinished方法我们对url作监听

 override fun onPageFinished(view: WebView?, url: String?) {
                super.onPageFinished(view, url)
                //这段js函数的功能就是注册监听，遍历所有的img标签，并添加onClick函数，
                // 函数的功能是在图片点击的时候调用本地java接口并传递url过去
                webView?.loadUrl(
                    "javascript:(function(){"
                            + "var objs = document.getElementsByTagName(\"img\"); "
                            + "for(var i=0;i<objs.length;i++)  " + "{"
                            + "    objs[i].οnclick=function()  " + "    {  "
                            + "        window.imagelistner.openImageUrl(this.src);  "
                            + "    }  " + "}" + "})()"
                );

            }

上述这段代码我们需要注意 window.imagelistner.openImageUrl(this.src)
这句代码的imagelistner与openImageUrl
webView?.addJavascriptInterface(JavaScriptInterface(this), "imagelistner")定义的方法名，
而 openImage就是我们自定义的 JavaScriptInterface 中的 openImage 方法

接下来我们定义JS接口

	 // js通信接口
    class JavaScriptInterface internal constructor(context: Context) {
        private var mContext: Context = context

        //https://inews.gtimg.com/newsapp_bt/0/14526974536/1000
        @android.webkit.JavascriptInterface
        fun openImageUrl(img: String?) {
            img.logE("当前图片地址：")
            val intent = Intent(mContext, ShowWebImageActivity::class.java)
            intent.putExtra("img", img)
            ContextCompat.startActivity(mContext, intent, null)
        }
    }

这里的 JavascriptInterface 就是和 webView?.addJavascriptInterface(JavaScriptInterface(this), "imagelistner"), 中的 new JavascriptInterface(this) 对应的，这样就实现通信了

展示及下载

通过上面的通信我们从js那边拿到了图片的url 这样对于我们来说就是小菜一碟了
直接加载就完事了具体看代码实现
这里要注意我们需要把Activity改成dialog的形式不然一张图就占全屏属实浪费也不好看
你还记得android初学的问题如何把activity改成dialog吗？

还要去掉activity的title 不然有个应用名的标题看起来很奇怪

override fun initView(savedInstanceState: Bundle?) {
        title = null  //去标题
        val url = intent.getStringExtra("img") //接受url
        if (url != null) {
            Glide.with(this)
                .load(url)
                .transition(DrawableTransitionOptions.withCrossFade(500))
                .into(mBind.imageShow)

        }

        //长按下载图片
        mBind.imageShow.setOnLongClickListener {
            try {
                if (url != null) {
                    mViewModel.uploadPhotoUrl = url
                    mViewModel.downLoad({
                        //下载中
                        mBind.tvDownNumber.visibility = View.VISIBLE
                        mBind.tvDownNumber.text = "下载进度：${it.progress}%"
                    }, {
                        //下载完成
                        mBind.tvDownNumber.visibility = View.GONE
                        showDialogMessage("下载成功，路径为：${it}")
                    }, {
                        //下载失败
                        mBind.tvDownNumber.visibility = View.GONE
                        showDialogMessage(it.msg)
                    })
                }
            } catch (ex: Exception) {
                ToastUtils.show("save pic error:$ex")
            }
            true
        }

关于图片下载我这里适配了android10及以上版本代码参考一下

 /**
     * 下载
     * @param downLoadData Function1<ProgressT<String>, Unit>
     * @param downLoadSuccess Function1<String, Unit>
     * @param downLoadError Function1<Throwable, Unit>
     */
    fun downLoad(downLoadData: (Progress) -> Unit = {}, downLoadSuccess: (String) -> Unit, downLoadError: (Throwable) -> Unit = {}) {
        viewModelScope.launch {
            if (checkedAndroid_Q()) {
                //android 10 以上
                val factory = Android10DownloadFactory(appContext, "${System.currentTimeMillis()}")
                RxHttp.get(uploadPhotoUrl)
                    .toFlow(factory) {
                        downLoadData.invoke(it)
                    }.catch {
                        //异常回调
                        downLoadError(it)
                    }.collect {
                        //成功回调
                        downLoadSuccess.invoke(UriUtils.getFileAbsolutePath(appContext,it)?:"")
                    }
            } else {
                //android 10以下
                val localPath = appContext.externalCacheDir!!.absolutePath + "/${System.currentTimeMillis()}"
                RxHttp.get(uploadPhotoUrl)
                    .toFlow(localPath) {
                        downLoadData.invoke(it)
                    }.catch {
                        //异常回调
                        downLoadError(it)
                    }.collect {
                        //成功回调
                        downLoadSuccess.invoke(it)
                    }
            }
        }
    }