项目遇到一个问题,在web页面中,禁止长按图片保存,

使用css属性:

 img { pointer-events: none; }
或者

 img { -webkit-user-select: none; }
无效,
以上属性在浏览器中是可以实现长按不能保存的,
接下来思考到既然要让图片不能触发手机自带的长按保存事件,需要让图片失去焦点,
如何失去焦点呢,其实很简单,只要在图片上遮一层盒子就行啦~
 
上代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 400px;
height: 400px;
border: 2px solid salmon;
position: relative;
}
.wrap{
width: 400px;
height: 400px;
position: absolute;
opacity: 0.5;
top: ;
left: ;
right: ;
bottom: ;
margin: auto;
background-color: darkslateblue;
z-index: ;
}
img{
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap"></div><!--遮罩盒子-->
<img src="img/1.jpg" />
</div>
</body>
</html>

这样就能在APP上禁止长按图片保存到本地了

微信APP长按图片禁止保存到本地的更多相关文章

  1. 微信小程序生成分享图片,保存到本地

    1.页面 <canvas canvas-id="shareCanvas" style="width:600px;height:900px">< ...

  2. iOS UIWebview 长按图片,保存到本地相册

    我们所要解决的问题如题目所示:ios中,长按Webview中的图片,将图片保存到本地相册.解决方案:对load的html网页,执行js注入,通过在webview中执行js代码,来响应点击事件,通过js ...

  3. php获取网页中图片并保存到本地

    php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: save_img("http://www.jbxue.com" ?>

  4. php获取网页中图片并保存到本地的代码

    php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...

  5. 下载远程(第三方服务器)文件、图片,保存到本地(服务器)的方法、保存抓取远程文件、图片 将图片的二进制字节字符串在HTML页面以图片形式输出 asp.net 文件 操作方法

    下载远程(第三方服务器)文件.图片,保存到本地(服务器)的方法.保存抓取远程文件.图片   将一台服务器的文件.图片,保存(下载)到另外一台服务器进行保存的方法: 1 #region 图片下载 2 3 ...

  6. 使用URLConnection下载文件或图片并保存到本地

    有时候需要从网络上面下载图片到本地进行保存,代码如下: package com.jointsky.jointframe.test; import java.io.FileOutputStream; i ...

  7. python爬取某个网站的图片并保存到本地

    python爬取某个网站的图片并保存到本地 #coding:utf- import urllib import re import sys reload(sys) sys.setdefaultenco ...

  8. Python:爬取网站图片并保存至本地

    Python:爬取网页图片并保存至本地 python3爬取网页中的图片到本地的过程如下: 1.爬取网页 2.获取图片地址 3.爬取图片内容并保存到本地 实例:爬取百度贴吧首页图片. 代码如下: imp ...

  9. 编辑美化图片,保存至本地,Adobe出品(支持IOS,android,web调用)免费插件

    本例以web调用做为例子,本插件支持主流浏览器,IE要9以上,移动设备,触屏设备也支持,能自适应屏幕大小. 使用效果: 工具还是很丰富的,编辑完成之后,可以保存图片至本地目录. 使用说明: 1,需要在 ...

随机推荐

  1. (2018干货系列五)最新UI设计学习路线整合

    怎么学UI全链路设计 全链路设计师是参与整个商业链条,为每个会影响用户体验的地方提供设计的可解决方案,最后既满足了商业目标,又提升了产品的用户体验和设计质量,与平面设计.UI设计彻底区分开来,是真正的 ...

  2. Object Detection︱RCNN、faster-RCNN框架的浅读与延伸内容笔记

    一.RCNN,fast-RCNN.faster-RCNN进化史 本节由CDA深度学习课堂,唐宇迪老师教课,非常感谢唐老师课程中的论文解读,很有帮助. . 1.Selective search 如何寻找 ...

  3. 3.3.2 PCI设备对不可Cache的存储器空间进行DMA读写

    在x86处理器和PowerPC处理器中,PCI设备对"不可Cache的存储器空间"进行DMA读写的过程并不相同.其中PowerPC处理器对"不可Cache的存储器空间&q ...

  4. AHB/APB简介

    AHB AHB总线互联结构图 随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大.数字IC从基于时序驱动的设计方法,发展到基于IP复用的设计方法,并在SOC设计中得到了广泛应用.在基于IP复用的 ...

  5. NLP︱LDA主题模型的应用难题、使用心得及从多元统计角度剖析

    将LDA跟多元统计分析结合起来看,那么LDA中的主题就像词主成分,其把主成分-样本之间的关系说清楚了.多元学的时候聚类分为Q型聚类.R型聚类以及主成分分析.R型聚类.主成分分析针对变量,Q型聚类针对样 ...

  6. ClientToScreen 和ScreenToClient 用法

    ClientToScreen( )是把窗口坐标转换为屏幕坐标 ScreenToClient( )是把屏幕坐标转换为窗口坐标 屏幕坐标是相对于屏幕左上角的,而窗口坐标是相对于窗口用户区左上角的 VC下, ...

  7. WebService之CXF注解之五(配置文件)

    1.web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app version=" ...

  8. Linux查看当前正在运行的进程

    Linux查看当前正在运行的进程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ps PID TTY TIME CMD 2576 pts/0 00:00:00 ...

  9. linq根据传入数据集合查询对应子级数据

    工作中经常用到的linq根据传入数据集合查询对应子级数据,整理共享,希望大家都能用得上,代码中doublesArray 为父节点对应ID数据集合,再根据ID数据集合查询全部子级数据. //获取缓存数据 ...

  10. 安裝pycharm

    一路按照這個教程走下來的.大體無誤. http://www.jianshu.com/p/042324342bf4 除了激活碼那裏,已經被cancel了,查找了很多辦法,最後發現衹要換成三個選項之一的 ...