Android实现点击WebView界面中图片滑动浏览与保存图片功能

 /**
 *这个接口就是给 JavaScript 调用的,调用结果就是返回 HTML 文本，
 *然后 getAllImageUrlFromHtml(HTML) 
 *从 HTML文件中提取页面所有图片对应的地址对象
 **/
private class InJavaScriptLocalObj {
 /**
 * 获取 WebView 加载对应的 HTML 文本
 * @param HTML WebView 加载对应的 HTML 文本
 */
 @android.webkit.JavascriptInterface
 public void showSource(String html) {
  //从 HTML 文件中提取页面所有图片对应的地址对象
  getAllImageUrlFromHtml(html);
 }
 }

 mWebView.getSettings().setJavaScriptEnabled(true);
 mWebView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
 mWebView.setWebViewClient(new WebViewClient() {
  // 网页跳转
  @Override
  public boolean shouldOverrideUrlLoading(WebView view, String url) {
  view.loadUrl(url);
  return true;
  }
  // 网页加载结束
  @Override
  public void onPageFinished(WebView view, String url) {
  super.onPageFinished(view, url);
  //解析 HTML
  parseHTML(view);
  }
 /**
 * Java 调取 js 代码,
 * @param view WebView
 */
private void parseHTML(WebView view) {
 //这段 js 代码是解析获取到了 HTML 文本文件，然后调用本地定义的 Java 代码返回
 //解析出来的 HTML 文本文件
 view.loadUrl("javascript:window.local_obj.showSource(''+"
  + "document.getElementsByTagName('html')[0].innerHTML+'');");
}

 // 获取 img 标签正则
 private static final String IMAGE_URL_TAG = "]*?>";
 // 获取 src 路径的正则
 private static final String IMAGE_URL_CONTENT = "http:\"?(.*?)(\"|>|\\s+)";
/***
 * 获取页面所有图片对应的地址对象，
 * 例如 
 * @param HTML WebView 加载的 HTML 文本
 * @return
 */
private List getAllImageUrlFromHtml(String html) {
 Matcher matcher = Pattern.compile(IMAGE_URL_TAG).matcher(html);
 List listImgUrl = new ArrayList();
 while (matcher.find()) {
 listImgUrl.add(matcher.group());
 }
 //从图片对应的地址对象中解析出 src 标签对应的内容
 getAllImageUrlFormSrcObject(listImgUrl);
 return listImgUrl;
}
 /***
 * 从图片对应的地址对象中解析出 src 标签对应的内容，即 url
 * 例如 "http://sc1.hao123img.com/data/f44d0aab7bc35b8767de3c48706d429e"
 * @param listImageUrl 图片地址对象例如 ：
 *
 */
 private List getAllImageUrlFormSrcObject(List listImageUrl) {
 for (String image : listImageUrl) {
  Matcher matcher = Pattern.compile(IMAGE_URL_CONTENT).matcher(image);
  while (matcher.find()) {
  listImgSrc.add(matcher.group().substring(0, matcher.group().length() - 1));
  }
 }
 return listImgSrc;
 }

// js 通信接口，定义供 JavaScript 调用的交互接口
private class MyJavascriptInterface {
 private Context context;
 public MyJavascriptInterface(Context context) {
 this.context = context;
 }
 /**
 * 点击图片启动新的 ShowImageFromWebActivity，并传入点击图片对应的 url
 * 和页面所有图片对应的 url
 * @param url 点击图片对应的 url
 */
 @android.webkit.JavascriptInterface
 public void openImage(String url) {
 Intent intent = new Intent();
 intent.putExtra("image", url);
 //listImgSrc 该参数为页面所有图片对应的 url
 intent.putStringArrayListExtra(URL_ALL, (ArrayList) listImgSrc);
 intent.setClass(context, ShowImageFromWebActivity.class);
 context.startActivity(intent);
 }
}

 mWebView.getSettings().setJavaScriptEnabled(true);
//载入 js
mWebView.addJavascriptInterface(new MyJavascriptInterface(this), "imageListener");
mWebView.setWebViewClient(new WebViewClient() {
 // 网页跳转
 @Override
 public boolean shouldOverrideUrlLoading(WebView view, String url) {
 view.loadUrl(url);
 return true;
 }
 // 网页加载结束
 @Override
 public void onPageFinished(WebView view, String url) {
 super.onPageFinished(view, url);
 // web 页面加载完成，添加监听图片的点击 js 函数
 addImageClickListener();
 }
 
 /**
 * 注入 js 函数监听，这段 js 函数的功能就是，遍历所有的图片，并添加 onclick 函数，
 * 实现点击事件，
 * 函数的功能是在图片点击的时候调用本地 java 接口并传递点击图片对应的 url 过去
 */
 private void addImageClickListener() {
 mWebView.loadUrl("javascript:(function(){" +
  "var objs = document.getElementsByTagName(\"img\"); " +
  "for(var i=0;i

//长按点击事件
mWebView.setOnLongClickListener(new View.OnLongClickListener() {
 @Override
 public boolean onLongClick(View v) {
 //响应长按事件
 responseWebLongClick(v);
 return false;
 }
});
 /**
 * 响应 WebView 长按图片的点击事件
 * @param v
 */
 private void responseWebLongClick(View v) {
 if (v instanceof WebView) {
  WebView.HitTestResult result = ((WebView) v).getHitTestResult();
  if (result != null) {
  int type = result.getType();
  //判断点击类型如果是图片
  if (type == WebView.HitTestResult.IMAGE_TYPE || type == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {
   longClickUrl = result.getExtra();
   //弹出对话框
   showDialog(longClickUrl);
  }
  }
 }
 }
 /**
 * 长按 WebView 中图片弹出对话框，可以选择保存图片
 * @param url 点击图片对应的 url
 */
 private void showDialog(final String url) {
 new ActionSheetDialog(this)
  .builder()
  .setCancelable(true)
  .setCanceledOnTouchOutside(true)
  .addSheetItem(
   "保存到相册",
   ActionSheetDialog.SheetItemColor.Blue,
   new ActionSheetDialog.OnSheetItemClickListener() {
    @Override
    public void onClick(int which) {
    //下载图片
    downloadImage(url);
    }
   }).show();
 }

public class ShowImageFromWebActivity extends Activity implements View.OnClickListener {
 private ViewPager vpImageBrowser;
 private TextView tvImageIndex;//显示滑动页数
 private Button btnSave;//保存图片按钮
 private ImageBrowserAdapter adapter;
 private ArrayList imgUrls;//WebView 页面所有图片 URL
 private String url;//WebView 页面所有图片中被点击图片对应 URL
 private int currentIndex;//标记被滑动图片在所有图片中的位置
 private Handler mHandler;//异步发送消息
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_show_image_from_web);
 initView();
 initListener();
 initData();
 }
 private void initView(){
 vpImageBrowser = (ViewPager) findViewById(R.id.vp_image_browser);
 tvImageIndex = (TextView) findViewById(R.id.tv_image_index);
 btnSave = (Button) findViewById(R.id.btn_save);
 }
 private void initData(){
 mHandler = new Handler();
 imgUrls=getIntent().getStringArrayListExtra(MainActivity.URL_ALL);
 url=getIntent().getStringExtra("image");
 //获取被点击图片在所有图片中的位置
 int position=imgUrls.indexOf(url);
 adapter=new ImageBrowserAdapter(this,imgUrls);
 vpImageBrowser.setAdapter(adapter);
 final int size=imgUrls.size();
 if(size > 1) {
  tvImageIndex.setVisibility(View.VISIBLE);
  tvImageIndex.setText((position+1) + "/" + size);
 } else {
  tvImageIndex.setVisibility(View.GONE);
 }
 vpImageBrowser.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
  @Override
  public void onPageSelected(int arg0) {
  currentIndex=arg0;
  int index = arg0 % size;
  tvImageIndex.setText((index+1) + "/" + size);
  }
  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
  // TODO Auto-generated method stub
  }
  @Override
  public void onPageScrollStateChanged(int arg0) {
  // TODO Auto-generated method stub
  }
 });
 vpImageBrowser.setCurrentItem(position);
 }
 private void initListener(){
 btnSave.setOnClickListener(this);
 }
 @Override
 public void onClick(View v) {
 switch (v.getId()){
  case R.id.btn_save :
  Toast.makeText(getApplicationContext(), "开始下载图片", Toast.LENGTH_SHORT).show();
  downloadImage();
  break;
 }
 /**
 * 开始下载图片
 */
 private void downloadImage() {
 downloadAsync(imgUrls.get(currentIndex), Environment.getExternalStorageDirectory().getAbsolutePath() + "/ImagesFromWebView");
 }
 
 }

<?xml version="1.0" encoding="utf-8"?>

 
 
 
 
 
 
 

public class ImageBrowserAdapter extends PagerAdapter {
 private Activity context;
 private List picUrls;
 public ImageBrowserAdapter(Activity context, ArrayList picUrls) {
 this.context = context;
 this.picUrls = picUrls;
 }
 @Override
 public int getCount() {
 return picUrls.size();
 }
 
 @Override
 public boolean isViewFromObject(View view, Object object) {
 return view == object;
 }
 @Override
 public View instantiateItem(ViewGroup container, int position) {
 View view = View.inflate(context, R.layout.item_image_browser, null);
 ImageView iv_image_browser = (ImageView) view.findViewById(R.id.show_webimage_imageview);
 String picUrl = picUrls.get(position);
 final PhotoViewAttacher photoViewAttacher=new PhotoViewAttacher(iv_image_browser);
 photoViewAttacher.setScaleType(ImageView.ScaleType.FIT_CENTER);
 //显示图片
 Glide.with(context).
  load(picUrl)
  .crossFade()
  .placeholder(R.drawable.avatar_default)
  .error(R.drawable.image_default_rect)
  .into(new GlideDrawableImageViewTarget(iv_image_browser){
  @Override
  public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> animation) {
   super.onResourceReady(resource, animation);
   photoViewAttacher.update();
  }
  });
 container.addView(view);
 return view;
 }
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
 container.removeView((View) object);
 }

//ImageBrowserAdapter Item 布局文件
<?xml version="1.0" encoding="utf-8"?>