Android点击WebView中的图片查看大图

Android点击WebView中的图片查看大图

WebView加载Html文本加载图片并同时实现获取图片下标

首先加载html文本

 web_view.loadDataWithBaseURL(null, Content, "text/html", "UTF-8", null);
     /**
     * 获取HTML文件里面的IMG标签的SRC地址
     *
     * @param htmlText 带html格式的文本
     * @return 图片集合
     */
  public static List<String> GetHtmlImageSrcList(String htmlText)
    {
        List<String> imgSrc = new ArrayList<String>();
        Matcher m = Pattern.compile("src=\"?(.*?)(\"|>|\\s+)").matcher(htmlText);
        while(m.find())
        {
            imgSrc.add(m.group(1));
        }
        return imgSrc;
    }

创建JavascriptInterface。JavascriptInterface是Google官方为我们提供的Javascript与Native通信的解决方案。这里创建一个类，名称为JavascriptInterface（可自定义），为其添加一个方法startPhotoActivity()，该方法接收图片地址，启动PhotoActivity显示大图。

public class JavascriptInterface {  
    @android.webkit.JavascriptInterface  
    public void startPhotoActivity(String imageUrl) {  
        String [] urls=new String[listImg.size()];//这里是因为该图片查看大图是需要传一个图片数组，如果该图片查看器是需要一个图片集合，则无需将集合添加到数组
            for (int i = 0; i < listImg.size(); i++){
                urls[i]=listImg.get(i);
            }

            for (int i = 0; i < listImg.size(); i++) {//根据imageUrl来获取图片的下标，这里是通过imageUrl来匹配集合中的地址！如果相同则该地址在集合的下标即为imageUrl的下标
                String url = listImg.get(i).toString();
                if (imageUrl.equals(url)) {
                    Intent intent = new Intent(getActivity(),
                            ImagePagerActivity.class);
                    intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_URLS, urls);
                    intent.putExtra(ImagePagerActivity.EXTRA_IMAGE_INDEX, i);
                    startActivity(intent);
                }
            }
    }  
}

mWebView.addJavascriptInterface(new JavascriptInterface(), "mainActivity");  

在assets中创建一个js.txt文本，实现JavaScript代码。我们需要编写一个函数，遍历所有的标签，为每个img对象添加onclick事件。当img执行onclick事件时，调用Java代码启动显示大图页面，并传递自身的src属性。

function()  
{  
    // 获取"img"标签的对象的集合  
    var imgs = document.getElementsByTagName("img");  
    for(var i = 0; i < imgs.length; i++)  
    {  
        // 添加点击事件  
        imgs[i].onclick = function()  
        {  
        // "mainActivity"是在上面Java代码中创建的  
            mainActivity.startPhotoActivity(this.src);  
        }  
    }  
}  

JavaScript准备好之后，我们需要在网页加载完毕后，将其注入到网页中。WebView在页面加载完成时，会回调onPageFinished()方法，在这里实现js代码的注入。注入js代码的方法是通过调用WebView.loadUrl(“javascript:xxxxxx”)。

mWebView.setWebViewClient(new WebViewClient() {  
    @Override  
    public void onPageFinished(WebView webView, String s) {  
        mWebView.loadUrl("javascript:(" + readJS() + ")()");  
    }  
});

private String readJS() {  
        try {  
            InputStream inStream = getAssets().open("js.txt");  
            ByteArrayOutputStream outStream = new ByteArrayOutputStream();  
            byte[] bytes = new byte[1024];  
            int len = 0;  
            while ((len = inStream.read(bytes)) > 0) {  
                outStream.write(bytes, 0, len);  
            }  
            return outStream.toString();  
        } catch (IOException e) {  
            e.printStackTrace();  
        }  
        return null;  
    }    

参考来源:
http://blog.csdn.net/ruancoder/article/details/53958773