Android WebView 点击图片获取查看预览大图缩小

WebView 点击图片在移动端要注入JS 去搞定  但是一般这种需求也是可以教给你们丰富经验的H5前端小姐姐(小哥哥)进行搞定的

那么如果前端小哥哥或者小姐姐不会怎么办那么请看下文

1   添加网络权限

  <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

2   编写JavaInterface 代码    当然我们要注意@JavaScruiInterface  下的方法名  此时记住它  openImage  直接跳转  3 

public class MJavascriptInterface {
    private Activity context;
    public MJavascriptInterface(Activity context) {
        this.context = context;
    }

    @android.webkit.JavascriptInterface
    public void openImage(String img, String[] array) {
        ArrayList<String> list = addImages(array);
        //查看当前点击图片的索引
        int i = list.indexOf(img);
        //跳转显示图片页面
        Intent intent = new Intent(context, WebViewImageOpen.class);
        intent.putStringArrayListExtra("imageUrls", list);
        intent.putExtra("curImg", img);
        intent.putExtra("index", i);
        context.startActivity(intent);
    }
    //去重复的图片路径
    private ArrayList<String> addImages(String [] array) {
        ArrayList<String> list = new ArrayList<>();
        Set set = new HashSet();
        for (String cd:array) {
            if(set.add(cd)){
                list.add(cd);
            }
        }
        return list;
    }
}

3  添加JAVAscript 代码   在window.imagelistener后面就是我们 2 的那个方法名搞错了就不出效果了哟并且查看 onclick 是否有空格合作大小写错误   并且记住  imagelistener    并且注意一下   getElementsByTagName 这个方法中的img如果拿不到那就问下H5图片是不是修改了名字 如果修改了那么就进行修改和H5一样的名字就OK   看4 

   private void addImageClickListener() {
        wvBookPlay.loadUrl("javascript:(function(){" +
                "var objs = document.getElementsByTagName(\"img\"); " +
                " var array=new Array(); " +
                " for(var j=0;j<objs.length;j++){ array[j]=objs[j].src; }" +
                "for(var i=0;i<objs.length;i++)  " +
                "{"
                + "    objs[i].onclick=function()  " +
                "    {  "
                + "        window.imagelistener.openImage(this.src,array);  " +
                "    }  " +
                "}" +
                "})()");
    }

4  注入WebView  addJavascriptInterface 中的imagelistener 要和3 的一样不然也没有效果哟  此时我们把 2 个3 的整合放到4 就已经拿到了，其实就是强行给HTML 注入我们写好的JS 可以灵活变通不想要图片也是可以的

  wvBookPlay.getSettings().setJavaScriptEnabled(true);
  wvBookPlay.addJavascriptInterface(new MJavascriptInterface(this), "imagelistener");
  wvBookPlay.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                addImageClickListener();//待网页加载完全后设置图片点击的监听方法
            }
        });

 5 上面是  完成拿到下面是 图片展示 我用了一个PhotoView的插件并且使用了拦截上下滑动的ViewPager在下贴出来

  implementation 'com.github.chrisbanes:PhotoView:2.0.0'

5.1 自定义ViewPager  讲次View放到你的2标题中 自己写的Activity 当然不想自己写一下复制我的

public class HackyViewPager  extends ViewPager {
    private boolean isLocked;
    public HackyViewPager(Context context) {
        super(context);
        isLocked = false;
    }
    public HackyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        isLocked = false;
    }
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {//用于处理Touch事件
        if (!isLocked) {
            try {
                return super.onInterceptTouchEvent(ev);
            } catch (IllegalArgumentException e) {
                e.printStackTrace();
                return false;
            }
        }
        return false;
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return !isLocked && super.onTouchEvent(event);
    }
}

5.2 做好显示的子View布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"

  >

    <com.github.chrisbanes.photoview.PhotoView
        android:id="@+id/photoview"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:textSize="18sp"
        android:textColor="@android:color/black"
        android:text="@string/viewpager_indicator"
        android:background="@android:color/transparent" />
</RelativeLayout>

 里面引用了一个String 我贴出来放到values String中

  <string name="viewpager_indicator">%1$d/%2$d</string>

接下来就是展示了 大功告成  

public class WebViewImageOpen extends AppCompatActivity {

    private HackyViewPager hackyviewpager;
    private ArrayList<String> imageUrls;
    private int index;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_VISIBLE);//设置固定状态栏常驻，不覆盖app布局
            getWindow().setStatusBarColor(Color.parseColor("#FFFFFF"));//设置状态栏颜色
        }
        setContentView(R.layout.activity_web_view_image_open);
        //自定义ViewPager
        hackyviewpager = findViewById(R.id.viewpager);
        Intent intent = getIntent();
        if (intent != null) {
            imageUrls = intent.getStringArrayListExtra("imageUrls");
            index = intent.getIntExtra("index", 0);

        }
        hackyviewpager.setAdapter(new ViewPagerAdapter());
        hackyviewpager.setCurrentItem(index);
    }

    class ViewPagerAdapter extends PagerAdapter {

        @Override
        public int getCount() {
            return imageUrls.size();
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = View.inflate(WebViewImageOpen.this, R.layout.view_pager_item, null);
            PhotoView photoView = (PhotoView) view.findViewById(R.id.photoview);
            TextView indicator = (TextView) view.findViewById(R.id.indicator);
            //用Glide加载图片
            Glide.with(WebViewImageOpen.this).load(imageUrls.get(position)).into(photoView);
            CharSequence text = getString(R.string.viewpager_indicator, position + 1, imageUrls.size());
            //设置indicator
            indicator.setText(text);
            container.addView(view, ViewPager.LayoutParams.MATCH_PARENT, ViewPager.LayoutParams.MATCH_PARENT);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }
    }


}