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