js实现防盗图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
head>
<body>
   <div>testdiv>
   <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("");
        //  全屏禁用右键
        $(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

你可能感兴趣的:(js实现防盗图)