Android 获取WebView的HTML图片点击及查看

最新推荐文章于 2018-10-17 16:43:49 发布

System_err

最新推荐文章于 2018-10-17 16:43:49 发布

阅读量3.9k

点赞数 1

本文链接：https://blog.csdn.net/system_err/article/details/78054657

版权

本文详细介绍了在Android中如何捕获WebView中图片的点击事件，并展示如何实现图片查看、上下张切换、图片缩放以及保存图片。通过自定义WebViewClient、JavaScriptInterface和PhotoBrowserActivity，实现了图片的加载、缓存处理和动态权限申请。关键步骤包括添加权限、依赖、混淆设置，以及在PhotoBrowserActivity中使用ViewPager和第三方库Glide、PhotoView进行图片显示和交互。

摘要由CSDN通过智能技术生成

图示：

项目的知识点：

加载网页后如何捕捉网页中的图片点击事件；
获取点击的图片资源后进行图片显示，获取整个页面所有的图片；
支持查看上下一张的图片以及对图片缩放显示；
对图片进行保存；
其他：图片缓存的处理（不用每次都重新加载已查看过的图片）

项目代码结构：

前期准备（添加权限、依赖和混淆设置）：

添加权限：

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

添加依赖：

compile 'com.bm.photoview:library:1.4.1' 
compile 'com.github.bumptech.glide:glide:3.7.0'  
compile 'com.android.support:support-v4:25.0.0'

混淆文件设置：

-keep public class * implements com.bumptech.glide.module.GlideModule  
-keep public enum com.bumptech.glide.load.resource.bitmap.ImageHeaderParser$** {  
  **[] $VALUES;  
  public *;  
}

代码解析：

MainActivity很简单，代码如下：

@Override  
 public void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.activity_main);  
     contentWebView = (WebView) findViewById(R.id.webView);  
     contentWebView.getSettings().setJavaScriptEnabled(true);  
     contentWebView.loadUrl("http://a.mp.uc.cn/article.html?uc_param_str=frdnsnpfvecpntnwprdssskt&client=ucweb&wm_aid=c51bcf6c1553481885da371a16e33dbe&wm_id=482efebe15ed4922a1f24dc42ab654e6&pagetype=share&btifl=100");  
     contentWebView.addJavascriptInterface(new MJavascriptInterface(this,imageUrls), "imagelistener");  
     contentWebView.setWebViewClient(new MyWebViewClient());  
 }

很显然，就是WebView的基本初始化操作。其中

1.自定义了MJavascriptInterface的类用来实现js调用本地的方法；
2.自定义MyWebViewClient来实现对WebView的监听管理。

MyWebViewClient代码如下：

public class MyWebViewClient extends WebViewClient {  
    @Override  
    public void onPageFinished(WebView view, String url) {  
        view.getSettings().setJavaScriptEnabled(true);  
        super.onPageFinished(view, url);  
        addImageClickListener(view);//待网页加载完全后设置图片点击的监听方法  
    }  
  
    @Override  
    public void onPageStarted(WebView view, String url, Bitmap favicon) {  
        view.getSettings().setJavaScriptEnabled(true);  
        super.onPageStarted(view, url, favicon);  
    }  
  
    private void addImageClickListener(WebView webView) {  
        webView.loadUrl("javascript:(function(){" +  
                "var objs = document.getElementsByTagName(\"img\"); " +  
                "for(var i=0;i<objs.length;i+