js实现防盗图
2024-10-21 04:19:13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select:none;
user-select:none;
pointer-events:none;
}
</style>
</head>
<body>
<div>test</div>
<img id="DialogNoBtn" src="https://cdn.shopify.com/s/files/1/1811/7921/t/4/assets/us.jpg">
</body>
<script src="jquery-3.2.1.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").append("<div id='picDisableWrap' style='position:fixed;width:100%;height:1500px;background:rgba(0,0,0,.8);top:0;left:0;display:none;'></div>");
// 全屏禁用右键
$(document).bind("contextmenu",function(e){ return false; });
})
// 防止截屏
$(window).on('blur','#picDisableWrap',function(){})
window.onblur = function () { $("#picDisableWrap").show(); }
window.onfocus = function (){ $("#picDisableWrap").hide(); }
document.onkeydown = function(){
// 禁用F12
if(window.event && window.event.keyCode == 123) { event.keyCode=0; event.returnValue=false; }
// 禁用Ctrl + Alt + A
if((event.ctrlKey && event.altKey)||(event.ctrlKey && event.altKey && window.event.keyCode == 65)){ $("#picDisableWrap").show(); }
}
//图片右键弹出提示框
$("img").contextmenu(function(){ alert("Contact us to use our photos"); })
</script>
</html>
以上,通过客户端脚步实现基本的防盗图功能。
【技术栈】
1. 禁用网页端F12调试模式。通过判断keycode。
2. 禁用网页端鼠标右键。通过判断keycode。
3. 防止截屏。监听鼠标focus/blur事件。
4. 网页图片元素禁止用户选择。css实现。
5. 防止chrome浏览器拖拽下载图片。(待更新。。。)
补充说明:以上只能达到最基本的功能实现,对于前端程序猿来说,要破解也很简单,防盗图本身也只能防止作为大多数的小白。以上,欢迎补充。
最新文章
- 【转】Centos升级Python 2.7.12并安装pip、ipython
- Swift使用注意
- xpath php
- Shader Overview
- 通过正则获取URL中的参数
- 恒天云技术分享系列6 – vLan网络原理解析
- Python 库大全
- 原生Ajax + Promise
- VBA基础概念
- 阿里巴巴十年Java架构师分享,会了这个知识点的人都去BAT了
- NetSNMP开源代码学习——小试牛刀
- 12 SharedPreferences
- json模块
- web框架的本质
- asp一句话
- SpringJMS解析--监听器
- python 爬虫数据准换时间格式
- burpsuite的使用(一)
- django后台admin管理布局
- 新建WebAPI项目时遇到的问题