<!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浏览器拖拽下载图片。（待更新。。。）
补充说明：以上只能达到最基本的功能实现，对于前端程序猿来说，要破解也很简单，防盗图本身也只能防止作为大多数的小白。以上，欢迎补充。
转载于:https://www.cnblogs.com/hcxy/p/6771257.html
