H5移动端禁止长按保存图片

前言

最近在写一个海报分发证书的需求，用户信息是服务端接口请求展示，其他以img图片形式展现。在测试场景中发现长按页面，保存图片，但是保存的图片只是img图片，并没有服务端返回信息的整体渲染，所以考虑禁止长按保存图片功能。基于此做以下记录

第一种方法

给img标签添加css属性, 我这个海报连接是通过微信分发，所以在微信中直接访问是生效的，也是手机自带浏览器测试生效。

img {
  pointer-events:none;
}

第二种方法

-webkit-touch-callout 这个CSS 属性禁用了默认的callout展示， callout是指当触摸并按住一个元素的时候出现的提示。

当在iOS上一直按住一个目标元素时，Safari会展示一个关于这个链接的callout信息。webkit-touch-callout属性允许禁用掉这一行为。不过属于非标准属性，不建议使用

body {
  -webkit-touch-callout: none
}

第三种方法

改用背景图方式，原来使用img标签的改为背景图的方式实现，可以避免长按保存图片操作。

第四种方法

在img图片层增加遮罩，设置透明度为0，这样图片不会被点击，也不会出现长按保存图片操作。