admin 管理员组

文章数量: 1086019

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, //默认为truedoubletap: true, //默认为falselongtap: true, //默认为false,为true时是开启长按保存图片功能swipe: true, //默认为truedrag: true, //默认为truehold:true,//默认为false,不监听release:false//默认为false,不监听}
})

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

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

如上长按保存图片完成。

本文标签: H5长按保存图片