H5长按保存图片

说到长按保存图片，我们一定能想到touch事件，那么此时我们就需要用到touchstart、touchend、touchmove。

下面我分别使用Vue和MUI进行代码解析

Vue:

首先我们需要给标签绑定这三个事件

<img class="saveImg" src="图片途径" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">

其次是我们的定时器，我们需要控制长按的时间，一般不会超过一秒钟

data(){
    return{
        time:""    
    }
}

touchstart(e){
    this.time = setTimeout(() => {
        var imgUrl = e.target.src
        //此处是调用的APP得方法来保存图片，正常的H5项目是无法保存图片，除非我们项目创建时是移动APP项目
        saveWxTimeLine1(imgUrl)
    },1000)
}

结束及移除长按事件

touchend(){
    clearTimeout(this.time)
},
touchmove(){
    clearTimeout(this.time)
}

MUI:

<img class="saveImg" src="图片途径">

首先我们需要在mui.init()初始化时打开MUI的tap属性。

mui.init({
   gestureConfig: {
      tap: true, //默认为true
	  doubletap: true, //默认为false
	  longtap: true, //默认为false，为true时是开启长按保存图片功能
	  swipe: true, //默认为true
	  drag: true, //默认为true
	  hold:true,//默认为false，不监听
	  release:false//默认为false，不监听
   }
})

此时我们需要监听dom是否发起了longtap长按请求：

$(".saveImg").on("longtap",function(){
    var imgUrl = $(this).attr('src')
    //调用APP保存图片方法
    saveWxTimeline1(imgUrl)
})

如上长按保存图片完成。