方案思路，
1.在点击图片的时候调用本地的java方法并给出响应的图片地址
2.本地获得图片地址后，开启一个遮罩activity进行显示和处理
第二步的实现很容易实现，关键是第一步的实现，在网页中点击图片不会调用本地的java代码。那么我们需要给这个点击事件加上相应的js函数，让点击事件调用的js函数来调用我们提前准备好的java函数，等我们捕获到图片的url剩下的就好处理了。
关键点就是给普通的html注入我们的js函数，让图片能够响应点击并调用js函数，在通过js函数来调用我们的java函数。听起来好像有点绕，不过也不难，下面我们用代码实现下
对java和js交互还不熟悉的同学，请参照前面的文章
这次实例的主要功能：点击图片在新的activity中展示，对图片能够进行手势操作，包括双指缩放等
效果图
加载webview的activity代码
[java] view plain
copy
1. package
2.
3. import
4. import
5. import
6. import
7. import
8. import
9. import
10. import
11.
12. @SuppressLint("SetJavaScriptEnabled")
13. public class MainActivity extends
14.
15. private WebView contentWebView = null;
16.
17. @SuppressLint("SetJavaScriptEnabled")
18. @Override
19. public void
20. super.onCreate(savedInstanceState);
21. setContentView(R.layout.main);
22. contentWebView = (WebView) findViewById(R.id.webview);
23. // 启用javascript
24. true);
25. // 随便找了个带图片的网站
26. "http://www.weim.me/12408.html");
27. // 添加js交互接口类，并起别名 imagelistner
28. new JavascriptInterface(this), "imagelistner");
29. new
30.
31. }
32.
33. // 注入js函数监听
34. private void
35. // 这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，函数的功能是在图片点击的时候调用本地java接口并传递url过去
36. "javascript:(function(){"
37. "var objs = document.getElementsByTagName(\"img\"); "
38. "for(var i=0;i<objs.length;i++) "
39. "{"
40. " objs[i].οnclick=function() "
41. " { "
42. " window.imagelistner.openImage(this.src); "
43. " } "
44. "}"
45. "})()");
46. }
47.
48. // js通信接口
49. public class
50.
51. private
52.
53. public
54. this.context = context;
55. }
56.
57. public void
58. System.out.println(img);
59. //
60. new
61. "image", img);
62. class);
63. context.startActivity(intent);
64. System.out.println(img);
65. }
66. }
67.
68. // 监听
69. private class MyWebViewClient extends
70. @Override
71. public boolean
72.
73. return super.shouldOverrideUrlLoading(view, url);
74. }
75.
76. @Override
77. public void
78.
79. true);
80.
81. super.onPageFinished(view, url);
82. // html加载完成之后，添加监听图片的点击js函数
83. addImageClickListner();
84.
85. }
86.
87. @Override
88. public void
89. true);
90.
91. super.onPageStarted(view, url, favicon);
92. }
93.
94. @Override
95. public void onReceivedError(WebView view, int
96.
97. super.onReceivedError(view, errorCode, description, failingUrl);
98.
99. }
100. }
101.
102. }
展示图片的activity代码
[java] view plain
copy
package1.
2. import
3. import
4. import
5.
6. import
7. import
8. import
9. import
10. import
11.
12. public class ShowWebImageActivity extends
13. private TextView imageTextView = null;
14. private String imagePath = null;
15. private ZoomableImageView imageView = null;
16.
17. @Override
18. protected void
19. super.onCreate(savedInstanceState);
20. setContentView(R.layout.show_webimage);
21. this.imagePath = getIntent().getStringExtra("image");
22.
23. this.imageTextView = (TextView) findViewById(R.id.show_webimage_imagepath_textview);
24. this.imagePath);
25. imageView = (ZoomableImageView) findViewById(R.id.show_webimage_imageview);
26.
27. try
28. this.imagePath)).getBitmap());
29. catch
30. e.printStackTrace();
31. }
32. }
33.
34. public static Drawable loadImageFromUrl(String url) throws
35.
36. new
37. InputStream i = (InputStream) m.getContent();
38. "src");
39. return
40. }
41. }
图片布局文件
[html] view plain
copy
1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6.
7. <!-- TODO 默认占位图 -->
8.
9. <wst.webview.ZoomableImageView
10. android:id="@+id/show_webimage_imageview"
11. android:layout_width="fill_parent"
12. android:layout_height="fill_parent"
13. android:scaleType="matrix"
14. android:src="@drawable/icon" />
15.
16. <TextView
17. android:id="@+id/show_webimage_imagepath_textview"
18. android:layout_width="fill_parent"
19. android:layout_height="wrap_content"
20. android:gravity="center"
21. android:textColor="#ffff0000" />
22.
23. </LinearLayout>
希望对大家有所帮助
