WebView页面上的图片点击的时候加载到Viewpager显示并且可以放大缩小

//photoView的依赖
    compile 'com.github.chrisbanes.photoview:library:+'
public class MainActivity extends AppCompatActivity {

    private WebView webview;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webview = (WebView) findViewById(R.id.webview);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.addJavascriptInterface(new JavascriptInterface(), "imageListener");
        webview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                webview.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>100){" +
                        "imgUrl += objs[i].src + ',';isShow = true;" +
                        "    objs[i].οnclick=function()  " +
                        "    {  "
                        + "        window.imageListener.openImage(imgUrl);" +
                        "    }" +
                        "}" +
                        "}" +
                        "})()"
                );
            }
        });
        webview.loadUrl("http://news.sina.com.cn/o/2017-08-20/doc-ifykcirz3302042.shtml");
//        得到屏幕的宽和高
        getWindowWidthAndHeight();
    }

    //        得到屏幕的宽和高
    private void getWindowWidthAndHeight() {
        DisplayMetrics metrics = new DisplayMetrics();

        WindowManager manager = getWindowManager();
        manager.getDefaultDisplay().getMetrics(metrics);
        //暂时定义一个类,保存屏幕的宽高,在后面加载的图片让他全屏显示
        Config.WINDOW_WIDTH = metrics.widthPixels;
        Config.WINDOW_HEIGHT = metrics.heightPixels;
	//下面方法也可以得到屏幕的宽和高
	DisplayMetrics displayMetrics1 = getActivity().getResources().getDisplayMetrics();
	Config.WINDOW_WIDTH = displayMetrics1.widthPixels;
	Config.WINDOW_HEIGHT = displayMetrics1.heightPixels;

    }    //和js交互的方法    public class JavascriptInterface {        //js将所有图片url用逗号分隔拼接成字符串,通过 openImage(String imageUrl)这个方法的参数传给我们        @android.webkit.JavascriptInterface        public void openImage(String imageUrl) {            String[] imgs = imageUrl.split(",");            //将字符串解析成图片url的集合            final ArrayList<String> imgUrlList = new ArrayList<>();            for (String s : imgs) {                imgUrlList.add(s);            }            //从js回调回来的方法默认是在js的一个线程中是子线程,所以要做更新UI的操作的话需要放到主线程            runOnUiThread(new Runnable() {                @Override                public void run() {                    //拿到图片url集合去显示我们的viewpager                    new MyViewPagerDialog(MainActivity.this, imgUrlList).show();                }            });        }    }}
//自定义类保存屏幕的宽高
public class Config {
    public static int WINDOW_WIDTH;
    public static int WINDOW_HEIGHT;
}
//点击图片的时候弹出dialog,里面存放的是viewpager,
class MyViewPagerDialog extends Dialog {
    private ArrayList<String> imgUrlList;
    private TextView page;
    private ViewPager viewpager;
    private View view;
    private List<View> list;

    public MyViewPagerDialog(@NonNull Context context, ArrayList<String> imgUrlList) {
        //注意在这里给dialog设置一个style,透明背景
        super(context, R.style.transparentBgDialog);
        this.imgUrlList = imgUrlList;
//控件必须在这里初始化,不能再oncreate初始化
        initView(context);
        intiData(context);
    }

    private void intiData(Context context) {
        list = new ArrayList<>();
        //默认显示页面从1页开始
        page.setText("1/" + imgUrlList.size());
        //遍历把图片的地址加载出来,添加到photoView上面
        for (int i = 0; i < imgUrlList.size(); i++) {
            PhotoView photoView = new PhotoView(context);
            //点击图片关闭viewpager
            photoView.setOnViewTapListener(new OnViewTapListener() {
                @Override
                public void onViewTap(View view, float x, float y) {
                    dismiss();
                }
            });
            //设置photoView的图片铺满全屏
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup
                    .LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            photoView.setLayoutParams(layoutParams);
            //把图片加载出来,显示在PhohoView上面
            DisplayImageOptions build = new DisplayImageOptions.Builder()
                    .cacheInMemory(true)
                    .cacheOnDisk(true)
                    .showImageOnFail(R.mipmap.ic_launcher_round)//加载错误显示的图片
                    .build();
            ImageLoader.getInstance().displayImage(imgUrlList.get(i), photoView, build);

            //然后把加载出来的photoView添加到集合,然后传到ViewPager适配器
            list.add(photoView);
        }
        //然后给设置适配器
        viewpager.setAdapter(new MyViewPagerAdapter());
        viewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int
                    positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                page.setText(position + 1 + "/" + imgUrlList.size());
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

    }

    private void initView(Context context) {
        view = LayoutInflater.from(context).inflate(R.layout.dialog_viewpager, null);
        page = (TextView) view.findViewById(R.id.page);
        viewpager = (ViewPager) view.findViewById(R.id.viewpager);
        //因为默认的dialog是窗口模式,不是全屏,所以重新设置一下屏幕是全屏
        Window window = getWindow();
        WindowManager.LayoutParams layoutParams = window.getAttributes();
        layoutParams.x = 0;
        layoutParams.y = 0;
        layoutParams.width = Config.WINDOW_WIDTH;
        layoutParams.height = Config.WINDOW_HEIGHT;
        window.setAttributes(layoutParams);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(view);
    }

    class MyViewPagerAdapter extends PagerAdapter {
        @Override
        public int getCount() {
            return list != null ? list.size() : 0;
        }

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(list.get(position));
            return list.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }
}
//弹出的dialog的布局
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent">

    <TextView
        android:id="@+id/page"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
</FrameLayout>
//给dialog设置一个透明的style背景
<!--全屏背景半透明 dialog-->
<style name="transparentBgDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowIsTranslucent">true</item>
    //自己在color里面定义一个透明的颜色#00000000
    <item name="android:background">@color/transparent</item>
    <item name="android:windowBackground">@color/transparent</item>
    <item name="android:backgroundDimEnabled">true</item>
    <item name="android:windowNoTitle">true</item>
</style>