webview中图片的获取、保存、展示、缓存处理

最新推荐文章于 2024-02-22 10:04:44 发布

VIP文章 csdn_FlappyBird

最新推荐文章于 2024-02-22 10:04:44 发布

阅读量917

点赞数

分类专栏： webview Android 文章标签： webview 图片

本文链接：https://blog.csdn.net/CSDN_FlappyBird/article/details/60143394

版权

整体思路：在页面加载完成时获取webview页面的html源码，利用正则表达式获取html源码中的所有图片地址，获取到所有图片地址之后一切就变得简单了，监听图片的点击事件，从而实现图片的本地展示、保存以及滑动浏览问题

不善言辞较为简单直接上代码亲测目前未出现bug(代码直接粘进项目即可使用，建议先拷贝出去再看)
最终效果图如下：
——–
截取后的图片展示

知识点：1、如何获取webview的源码
    2、通过html源码获取img图片的地址
    3、gilde的使用

代码分析如下：
-------

1、自定义了MJavascriptInterface的类用来实现js调用本地的方法；并在WebViewClient中实现对WebView的监听管理。
MJavascriptInterface代码如下
--------------------------
        `public class MJavascriptInterface {
   
    private Context context;
    private String[] imageUrls;

    public MJavascriptInterface(Context context, String[] imageUrls) {
        this.context = context;
        this.imageUrls = imageUrls;
    }

    @android.webkit.JavascriptInterface
    public void openImage(String img) {
        Intent intent = new Intent();
        intent.putExtra("imageUrls", imageUrls);
        intent.putExtra("curImageUrl", img);
        intent.setClass(context, PhotoBrowserActivity.class);
        context.startActivity(intent);
        for (int i = 0; i < imageUrls.length; i++) {
            Log.e("图片地址" + i, imageUrls[i].toString());
        }
    }

    @android.webkit.JavascriptInterface
    public void getSource(String html) {
        imageUrls = StringUtils.returnImageUrlsFromHtml(html);
        Log.d("html=", html);
    }


2、 在MainActivity中 webView.setWebViewClient()的onPageFinished方法中设置addImageClickListener的监听方法——>当整个WebView页面加载完毕后，为每张图片设置监听事件——>这意味着，整个页面未加载完毕时，点击是无效的。
addImageClickListener的代码实现也很简单，通过js找到相应的img标签，这样就知道是图片了，然后为这些图片设置点击监听事件——>每当点击时调用自定义的openImage(url)方法。这个openImage(url)方法与MJavascriptInterface中对应的方法交相辉映，这样就形成了js调用本地的方法。

MainActivity中代码
------------------
  settings.setJavaScriptEnabled(true);
   webView.loadUrl(url);
   webView.addJavascriptInterface(new MJavascriptInterface(this,imageUrls), "imagelistener");
  webView.setWebViewClient(new WebViewClient() {         
  @Override
     public void onPageFinished(WebView view, String url) {
         view.loadUrl("javascript:window.imagelistener.getSource('<head>'+" +
                        "document.getElementsByTagName('html')[0].innerHTML+'</head>');");
                super.onPageFinished(view, url);
                addImageClickListener(view);//待网页加载完全后设置图片点击的监听方法
            }
        });
    private void addImageClickListener(WebView webView) {
        webView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "for(var i=0;i<objs.length;i++) " +
                "{"
                + " objs[i].onclick=function() " +
                " { "
                + "  window.imagelistener.openImage(this.src); " +//通过js代码找到标签为img的代码块，设置点击的监听方法与本地的openImage方法进行连接
                " } " +
                "}" +
                "})()");
    } 


3、StringUtils工具

最低0.47元/天解锁文章

csdn_FlappyBird

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webview中图片的获取、保存、展示、缓存处理

整体思路：在页面加载完成时获取webview页面的html源码，利用正则表达式获取html源码中的所有图片地址，获取到所有图片地址之后一切就变得简单了，监听图片的点击事件，从而实现图片的本地展示、保存以及滑动浏览问题不善言辞较为简单直接上代码亲测目前未出现bug 最终效果图如下： ——– 1、.自定义了MJavascriptInterface的类用来实现js调用本地的方法
复制链接

扫一扫