Android WebView实现长按保存图片及长按识别二维码功能

2019-10-22 18:17:09

字体：大中小

来源：转载

供稿：网友

先来简单说一下本文所要实现的功能：用户在浏览网页的时候，长按某一区域，识别如果是图片，则弹出弹框，出现保存图片的功能。同时识别图片是否是二维码，如果是则在弹框中追加识别二维码功能。

细节上：保存图片的弹框要显示在手指长按的位置；选择图片保存后，可以让用户直接去相册查看；选择识别二维码，判断是是不是网址，是的话可以让用户选择复制或访问，否则可以让用户选择复制或搜索。

然后再来看一下效果图：

保存图片

android,webview,长按保存图片,长按识别二维码

save.gif

识别包含普通文字的二维码：

android,webview,长按保存图片,长按识别二维码

text.gif

识别包含网址的二维码：

android,webview,长按保存图片,长按识别二维码

code.gif

上述功能所用到的类和库：

获得长按内容： WebView.HitTestResult
弹框列表： DialogFragment
图片下载： Glide
二维码识别： Zxing

实现要点

记录长按位置

继承 WebView 记录触摸位置：

@Override public boolean onInterceptTouchEvent(MotionEvent event) {  touchX = (int) event.getRawX();  touchY = (int) event.getRawY();  return super.onInterceptTouchEvent(event); }

弹框我选择 DialogFragment 而不是 poupwindow 的原因是 poupwindow 的显示通常需要依托另一个View，而且在7.0以上有兼容问题。

判断长按位置的内容类型是否是图片：

获取图片信息

setOnLongClickListener(new View.OnLongClickListener() {   public boolean onLongClick(View v) {    WebView.HitTestResult result = getHitTestResult();    if (null == result)     return false;    int type = result.getType();    switch (type) {     case WebView.HitTestResult.EDIT_TEXT_TYPE: // 选中的文字类型      break;     case WebView.HitTestResult.PHONE_TYPE: // 处理拨号      break;     case WebView.HitTestResult.EMAIL_TYPE: // 处理Email      break;     case WebView.HitTestResult.GEO_TYPE: // 　地图类型      break;     case WebView.HitTestResult.SRC_ANCHOR_TYPE: // 超链接      break;     case WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE: // 带有链接的图片类型     case WebView.HitTestResult.IMAGE_TYPE: // 处理长按图片的菜单项      String url = result.getExtra();      if (mOnSelectItemListener != null && url != null && URLUtil.isValidUrl(url))       mOnSelectItemListener.onSelected(touchX, touchY, result.getType(), url);      }      return true;     case WebView.HitTestResult.UNKNOWN_TYPE: //未知      break;    }    return false;   }  });

在手指长按位置处弹出弹框

HitTestResult 是一个实体类，只记录两个信息：当选选择内容的类型和内容的具体值。可以看到通过 WebView.HitTestResult ，我们可以获得除了图片外的很多内容类型。当然这里我们只需要判断是否是图片就好了，然后将长按位置和url一起回调给外层。在手指长按处显示弹框，主要就是 DialogFragment 显示位置的设定了：

public void onStart() {  super.onStart();  Dialog dialog = getDialog();  if (dialog != null) {   Window window = dialog.getWindow();   if (window != null) {    WindowManager.LayoutParams lp = window.getAttributes();    window.setGravity(Gravity.LEFT | Gravity.TOP);    lp.x = LocationX;//横坐标位置    lp.y = LocationY;//纵坐标位置    lp.width = UIHelper.dip2px(100);    lp.dimAmount = 0.0f;//外层背景透明，默认变暗    lp.width = ViewGroup.LayoutParams.WRAP_CONTENT;    lp.height = ViewGroup.LayoutParams.WRAP_CONTENT;    window.setAttributes(lp);    window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));//内部背景透明   }  } }

保存到相册

利用 Glide 下载图片， Glide 自带预加载和图片缓存功能，不需要每次都从网络中下载：

GlideApp.with(appContext).asFile().load(url).submit().get();

可以在长按识别出图片的时候就行预加载：

GlideApp.with(appContext).asBitmap().load(url).preload();

将图片保存在相册：

public static void displayToGallery(Context context, File photoFile) {  if (photoFile == null || !photoFile.exists()) {   return;  }  String photoPath = photoFile.getAbsolutePath();  String photoName = photoFile.getName();  // 把文件插入到系统图库  try {   ContentResolver contentResolver = context.getContentResolver();   MediaStore.Images.Media.insertImage(contentResolver, photoPath, photoName, null);  } catch (FileNotFoundException e) {   e.printStackTrace();  }  // 最后通知图库更新  context.sendBroadcast(new Intent(Intent.ACTION_MEDIA_SCANNER_SCAN_FILE, Uri.parse("file://" + photoPath))); }

识别图片中的二维码

显示弹框的同时还要判断图片是否包含二维码，这部分就是 Zxing 自带的功能，所以代码就不贴了。注意不应该等是 Zxing 判断是不是二维码后再显示弹框，因为这部分操作耗时可能比较长（见图二）。应当在识别二维码内容后再去更新弹框列表的内容。

总结

总体来说这个功能实现注意的地方还是挺多的，好在都不复杂。当然本例还存在待优化的地方，以及实现更高级的功能，比如以图搜图，查看大图功能，也可以利用 WebView.HitTestResult 对获取到其他类型的内容进行处理，限于篇幅就不再展开了。

最后贴下本项目github地址，对 WebView 感兴趣的可以了解下：

github

总结

以上所述是小编给大家介绍的Android WebView实现长按保存图片及长按识别二维码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对VEVB武林网网站的支持！

注：相关教程知识阅读请移步到Android开发频道。

上一篇：深入解析android5.1 healthd

下一篇：Android实现电池管理系统