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， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。