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长按保存图片
版权声明:本文标题:H5长按保存图片 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.roclinux.cn/b/1686560134a10341.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论