项目遇到一个问题,在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. 经典卷积神经网络(LeNet、AlexNet、VGG、GoogleNet、ResNet)的实现(MXNet版本)

    卷积神经网络(Convolutional Neural Network, CNN)是一种前馈神经网络,它的人工神经元可以响应一部分覆盖范围内的周围单元,对于大型图像处理有出色表现. 其中 文章 详解卷 ...

  2. Hi3531 SDK 安装以及升级使用说明

    Hi3531 SDK 安装以及升级使用说明 第一章 Hi3531_SDK_Vx.x.x.x版本升级操作说明    如果您是首次安装本SDK,请直接参看第2章.     第二章 首次安装SDK 1.Hi ...

  3. Linux 的进程状态

    (1)运行:当一个进程在处理机上运行时,则称该进程处于运行状态.处于此状态的进程的数目小于等于处理器的数目,对于单处理机系统,处于运行状态的进程只有一个.在没有其他进程可以执行时(如所有进程都在阻塞状 ...

  4. INF 右键安装驱动以及卸载

    INF 右键安装驱动以及卸载 之前写过一篇文章是关于INF文件详解的,大家可以参看INF文件详解,这次写的是关于INF右键安装,这样比较方便.卸载的话也是一句话,可以大大减少安装时间: 先将INF文件 ...

  5. PyCharm 2017.3 下载与安装

    微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.下载 (1).下载链接: https://www.jetbrains.com/pycharm ...

  6. 如何让window.open()以post请求方式调用(巧妙解法)

    问题由来: 在公司遇到一个线上bug,如下 var url = 'http://106.75.31.215:8012/onlinePreview?url=' + encodeURIComponent( ...

  7. 使用pyh生成HTML文档

    title: 使用pyh生成HTML文档 tags: [python3, 爬虫,pyh] date: 2018-03-09 21:01:34 categories: Python keywords: ...

  8. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  9. es6学习笔记--解构赋值

    昨天学习了es6语法中解构赋值,解构赋值在声明中和函数传参提高了灵活性和便捷性,值得掌握该语法. 概念: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.   数组的解构 ...

  10. BZOJ 1926: [Sdoi2010]粟粟的书架(主席树,二分答案)

    BZOJ 1926: [Sdoi2010]粟粟的书架(主席树,二分答案) 题意 : 给你一个长为\(R\)宽为\(C\)的矩阵,第\(i\)行\(j\)列的数为\(P_{i,j}\). 有\(m\)次 ...