仿微信浏览器长按呼出弹窗保存图片

一共使用了三种方式，最终采用了第三种方法。

产品提出如题的产品需求，大脑的的第一概念就是，肯定是微信再所有页面都注入了一个长按的js，然后调用本地的保存方法，移动端注入到webview里面，这个样ios和android端都做到了统一，这里webbview和js 的相互调用就不说了，google一大把

方法一：

js是这样的:

for (const A of Array.from(document.querySelectorAll('img'))) {

      A.addEventListener('touchstart', () => {

        let timer = null;

        // 清除默认行为

        event.preventDefault();

        timer = setTimeout(() => {

          console.log('长按图片');

//这里调用本地的方法，图片的地址 A.src

        }, 700);

      });

    }

写完代码就开始测试，遗憾的是发现好多图片不成功，比如作为背景的图片，还有添加了一些其他样式或者标签导致调用不成功的。

方法二：

由于本地注入的js更换需要发版，或者使用接口来更新，且js的兼容性不能保证，所以放弃了第一方法，改由前端在页面内注入js，由前端调用本地的js来实现保存图片的功能，这个方式的缺陷就是必须要是我们自己的网站页面才能调用这个方法，然而我们有些其他的三方页面也需要实现这个功能，所以这个方式也不是最好的实现方式。

方法三：

上面两种方式都无法实现我们的需求，于是又开始研究了。

Android:

大部分浏览器都带这个功能，于是就想看下chrome浏览器的功能是否是注入js的方式实现的，手机连上电脑，电脑打开chrome://inspect 发现并没有js的注入，（内心os😂，chrome怎么会使用这么low的方法），于是思考是否可以直接在webview里面去获取图片控件，以前看过一篇文章，webview其实也是再界面上去绘制的，Duang。。。 终于找到了 HitTestResult

hitTestResut 可以区分点击的类型，我们只需要知道下面两种类型

image image

然后给webview 设置一个长按事件监听，在事件监听里面判断类型，和获取图片地址就可以愉快的使用长按保存了。

//设置图片长按

webview.setOnLongClickListener {

    val hit = hitTestResult

    if (hit?.type == WebView.HitTestResult.IMAGE_TYPE || hit?.type == WebView.HitTestResult.SRC_IMAGE_ANCHOR_TYPE) {

        //这里进行操作，返回true webview不再响应

        return@setOnLongClickListener true

    }

    false

}

ios解决方案：