android Webview读取网页里的所有图片,并实现图片集观看,图片缩放

一.功能介绍

很多新闻类app,文章页面一般都是加载的网页,都有点击图片实现图片集观看的功能;有些这些功能都会在html网页中实现,但是也有的让我们自己实现这个功能;下面将我实现的此功能分享给大家;

二.代码介绍

1.实现此功能,需要webview支持 js

 //调用JS方法.安卓版本大于17,加上注解 @JavascriptInterface
mWebSettings.setJavaScriptEnabled(true);

2.重写onPageFinished方法,在网页加载完时,调用读取图片的JavaScript代码;

这段js函数实现了遍历所有的img标签，并添加onclick函数，在图片点击的时候调用本地接口,并传递图片的url实现图片加载;

@Override
public void onPageFinished(WebView view, String url) {
   //网页加载完成 走JS代码
  mWebView.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                "var imgUrl = \"\";"+
                "var filter = [\"img//EventHead.png\",\"img//kong.png\",\"hdtz//button.png\"];"+
                "var isShow = true;"+
                "for(var i=0;i<objs.length;i++){" +
                "for(var j=0;j<filter.length;j++){"+
                "if(objs[i].src.indexOf(filter[j])>=0) {"+
                "isShow = false; break;}}"+
                "if(isShow && objs[i].width>80){"+
                "imgUrl += objs[i].src + ',';isShow = true;"+
                "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.imageListener.openImage(imgUrl,this.src);" +
                "    }" +
                "}" +
                "}" +
                "})()"
        );
   super.onPageFinished(view, url);
        }

3.调用本地java接口,实现点击:

public class JavascriptInterface {
        @android.webkit.JavascriptInterface
        public void openImage(String imageUrl,String img) {
            int position = 0;
            String[] imgs = imageUrl.split(",");
            ArrayList<String> imgUrlList = new ArrayList<>();
            for (String s : imgs) {
                imgUrlList.add(s);
            }
            for (int i = 0;i<imgUrlList.size();i++){
                if (img.equals(imgUrlList.get(i))){
                    position = i;
                }
            }
            Intent intent = new Intent(MainActivity.this, ImageActivity.class);
            intent.putExtra("number",position);
            intent.putExtra("list",(Serializable) imgUrlList);
            startActivity(intent);
        }
    }

1. 在ImageActivity里实现图片集观看,借用 开源图片缩放库photoview实现图片缩放;
   需依赖photoview库

 //开源图片缩放库
    compile 'com.github.chrisbanes.photoview:library:1.2.4'

5.效果图:

下面附上demo 地址:
http://download.csdn.net/download/shanshan_1117/10131304