H5 禁用图片保存

[JslinSir]

如何禁用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>
 

第四种

设置图片为背景图

总结

通过浏览器的模拟器，第二种是生效的，遮罩视乎在浏览器中模拟器不生效