H5 禁用图片保存
JslinSir opened this issue · comments
如何禁用H5 长安图片保存
第一种
此css 属性作用在微信客户端浏览器,也就是腾讯内核的浏览器
img {
pointer-events:none;
}
注意:此css属性同时也会禁用掉图片的点击事件,如果同时要支持图片点击,外层套个div 事件绑定到外层div上
第二种
img{
user-select:none;
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}
注意:-webkit-touch-callout主要用于禁止长按菜单。针对iOS webkit内核的浏览器。
user-select属性是css3新增的属性,用于设置用户是否能够选中文本
第三种
加一层遮罩如下:
<div class="imgBox">
<div class="imgMask"></div>
<img src="xx.png"/>
</div>
<style>
.imgBox{
position: relative;
width: 100%;
margin: 0 auto;
.imgMask{
position: absolute;
z-index: 100;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
}
img{
display: block;
width: 100%;
}
}
</style>
第四种
设置图片为背景图
总结
通过浏览器的模拟器,第二种是生效的,遮罩视乎在浏览器中模拟器不生效