热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

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

本文要使用AndroidWebView实现长按保存图片及长按识别二维码功能,当用户在浏览网页的时候,长按某一区域,识别如果是图片,则弹出弹框,出现保存图片的功能

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

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

然后再来看一下效果图:

保存图片


save.gif

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


text.gif

识别包含网址的二维码:


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实现长按保存图片及长按识别二维码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 在项目部署后,Node.js 进程可能会遇到不可预见的错误并崩溃。为了及时通知开发人员进行问题排查,我们可以利用 nodemailer 插件来发送邮件提醒。本文将详细介绍如何配置和使用 nodemailer 实现这一功能。 ... [详细]
  • C#设计模式学习笔记:观察者模式解析
    本文将探讨观察者模式的基本概念、应用场景及其在C#中的实现方法。通过借鉴《Head First Design Patterns》和维基百科等资源,详细介绍该模式的工作原理,并提供具体代码示例。 ... [详细]
  • 本文详细介绍如何使用CSS自定义HTML5视频播放器的样式,涵盖常见属性及跨浏览器兼容性问题。发布时间:2020-09-14 14:46:29;来源:亿速云;阅读量:58;作者:小新。 ... [详细]
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 本文详细介绍了如何在Android 4.4及以上版本中配置WebView以实现内容的自动高度调整和屏幕适配,确保中文显示正常,并提供代码示例。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
  • 作为一名在大型手机游戏公司工作的程序员,尽管主要负责游戏逻辑和内容的开发,但对iOS底层开发接触较少。现在有了iPhone和可以虚拟MAC环境的电脑,希望能找到有效的iOS开发学习路径。 ... [详细]
  • 本文详细介绍了如何在Android应用中处理和使用Cookie,包括登录时获取Cookie并将其存储,以及在WebView中同步这些Cookie以保持用户会话。 ... [详细]
  • 本文探讨了在安卓设备上的微信H5环境中,如何解决长按图片时无法保存或分享Base64编码图片及Blob形式图片的问题,并提供了有效的解决方案。 ... [详细]
  • 在开发一款应用程序时,我需要向用户提供一系列URL列表。为了提高用户体验,计划根据Wi-Fi状态预先加载这些URL,以便用户在点击时能够迅速访问内容,特别是在连接到Wi-Fi的情况下。 ... [详细]
  • Flutter 核心技术与混合开发模式深入解析
    本文深入探讨了 Flutter 的核心技术,特别是其混合开发模式,包括统一管理模式和三端分离模式,以及混合栈原理。通过对比不同模式的优缺点,帮助开发者选择最适合项目的混合开发策略。 ... [详细]
  • 本文详细介绍了 Android WebView 中 setInitialScale 方法的使用及其重要性。通过设置不同的缩放比例,可以确保网页在不同分辨率的设备上显示最佳效果。 ... [详细]
  • 本文介绍了如何通过设置背景形状来轻松地为 Android 的 TextView 添加圆形边框。我们将详细讲解 XML 代码的配置,包括圆角、描边和填充等属性。 ... [详细]
  • 本文探讨了使用C#在SQL Server和Access数据库中批量插入多条数据的性能差异。通过具体代码示例,详细分析了两种数据库的执行效率,并提供了优化建议。 ... [详细]
  • 本文详细探讨了JavaScript中的作用域链和闭包机制,解释了它们的工作原理及其在实际编程中的应用。通过具体的代码示例,帮助读者更好地理解和掌握这些概念。 ... [详细]
author-avatar
感动宇宙coolboy_796
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有