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

时间: 2018-11-09阅读: 8662标签: 图片

在移动端访问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>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1301

html使用img标签和背景图片之间的区别

背景图片会等到html结构加载完成才开始加载img标签是网页结构的一部分,会在html结构加载的时候加载在网页加载的过程中,背景图片会等到结构加载完成(网页的内容全部显示以后)才开始加载,而img标签是网页结构(内容)的一部分会在html结构加载的过程中加载

使用 AVIF 图片格式

众所周知,一图胜千言,图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言,传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。

lazysizes.js使用方法_实现图片懒加载、延迟加载的js插件

当你的网站使用了大量图片时候,如果一次性全部加载,那么会严重影响网站的速度。通过lazysizes.js插件就能很好解决这个问题,它可以实现图片的延迟加载【懒加载】

css如何控制图片不变形?

在做网页时会遇到许多的问题,有的时候会遇到图片变形的问题,我们该如何通过css控制图片不变形呢?下面我们来看一下通过css控制图片不变形的方法。

WPF 中如何创建忽略 DPI 属性的图片

WPF 框架设计为与 DPI 无关,但你依然可能遇到 DPI 问题。尤其是 Image 控件显示的图片会根据图片 EXIF 中的 DPI 信息和屏幕 DPI 自动缩放图片。对于 UI 用图来说这是好事

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

JS 获取图片宽高

一般用于审核后台,比如说要求图片在一定区间内才能加精。也用于在 canvas 中裁图时计算缩放比例。方案为获取 naturalWidth。那么 naturalWidth 和 width 有什么不同?

html5图片上传使用FileReader预览

通过FileReader,和es6的方法解构赋值,promise对象简单封装上传预览,具体逻辑:选中图片之后,触发onchange方法,获得上传文件对象,调用fileReader方法验证图片是否符合上传需求,符合返回图片文本,不符合返回错误信息。

jpg、gif、png、svg、bmp、WebP图像格式的区别以及应用场景

jpg:非常适合作为储存像素色彩丰富的图片、例如照片等等,png:分为 png-8 以及 png-24 两种格式,gif:非常适合用来表现图标、 UI接口、线条插画、文字等部分的输出,也可用来展示小的动画。

CSS Blur() 将高斯模糊应用于输出图片

blur() CSS 方法将高斯模糊应用于输出图片. 结果为 <filter-function>.radius模糊的半径,值为<length>。 它定义了高斯函数的标准偏差值,即屏幕上有多少像素相互融合; 因此,较大的值会产生更多模糊。 值为0会使输入保持不变。 该值为空则为0。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!