html5移动端禁止长按图片保存的实现
2021-06-06 04:10
1516 查看
在移动端访问H5页面的时候,长按图片就会把图片保存起来,为了能够让用户体验更好一些,我们需要长按的时候也不保存图片。那该如何实现呢?下面给出3种解决方案。
方案一:使用 pointer-events:none
img{ pointer-events:none; }
亲测有效,适用于微信客户端的手机页面,图片被打开的情况.
方案二:全局属性
*{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
-webkit-touch-callout主要用于禁止长按菜单。当然针对webkit内核的浏览器。
user-select属性是css3新增的属性,用于设置用户是否能够选中文本。
方案三:加一层遮罩层
图片上边加一层div类似于遮罩层,这样图片就不会被点击,右击或长按也不会出现如图的图片另存为的选项了。 代码示例如下:
<div class="imgbox"> <div class="imshar"></div> <img src=""/> </div> <style> .imgbox{ position: relative; width: 80%; margin: 0 auto; margin-top: 20px; } .imgbox .imshar{ position: absolute; z-index: 100; left: 0; right: 0; top: 0; bottom: 0; opacity: 0; } .imgbox img{ display: block; width: 100%; } </style>
到此这篇关于html5移动端禁止长按图片保存的实现的文章就介绍到这了,更多相关html5禁止长按图片保存内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- 用html5文件api实现移动端图片上传&预览效果
- JavaScript 禁止用户保存图片的实现代码
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
- Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
- html5 canvas实现在线生成图片后保存到服务器(数据库)
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
- JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
- javascript实现移动端 HTML5 图片上传预览和压缩功能示例
- HTML5移动端实现选择裁剪图片并且ajax上传服务器
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
- html5实现摄像头拍照并使用java进行照片保存
- js实现截图保存图片功能的代码示例
- C#如何实现图片的剪裁并保存
- 使用Swiper开发移动端页面,轻松实现图片的轮播
- 利用HTML5,前端js实现图片压缩
- 分享一个HTML5的drag and drop API实现的图片拖拽分组效果
- Android实现下载图片并保存到SD卡中
- 用html5的canvas生成图片并保存到后台
- HTML5技术助力Q+ 将实现移动端应用平移