js实现防盗图

时间：2022-09-25 17:18:00
<!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浏览器拖拽下载图片。（待更新。。。）

补充说明：以上只能达到最基本的功能实现，对于前端程序猿来说，要破解也很简单，防盗图本身也只能防止作为大多数的小白。以上，欢迎补充。

js实现防盗图的更多相关文章

  1. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  2. 如何使用JS实现banner图滚动

    通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...

  3. JS思维导图（转）

    思维导图不得不说是学习及温习的极佳方法,这里转载一波网上他人的精品JS思维导图十张,共同学习,如有冒犯原著可联系本人及时处理.

  4. JavaScript的案例（数据校验，js轮播图，页面定时弹窗）

    1.数据校验            步骤            1.确定事件(onsubmit)并绑定一个函数            2.书写这个函数,获取数据,并绑定id            3. ...

  5. 纯js轮播图练习-2，js&plus;css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  6. 纯js轮播图练习-1

    偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...

  7. D3&period;js力导向图&lpar;适用于其他类型图&rpar;中后添加元素遮盖已有元素的问题解决

    上一篇说了在D3.js中动态增加节点及连线的一种实现方式,但是有后添加元素遮盖原节点的现象,这一篇说一下出现这个现象的解决办法. 在D3.js中后添加的元素是会遮盖先添加的元素的,同时还有一个设定:后 ...

  8. javascript原生js轮播图

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. D3&period;js 力导向图的显示优化

    D3.js 作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts.Chart.js,这两个库功能也很强大,但是有一个共同特点是封装层次高,留给开发者可设计和控制的部 ...

随机推荐

  1. java Servlet&plus;mysql 调用带有输入参数和返回值的存储过程&lpar;原创&rpar;

    这个数据访问的功能,我在.NET+Mysql .NET+Sqlserver  PHP+Mysql上都实现过,并且都发布在了我博客园里面,因为我觉得这个功能实在是太重要,会让你少写很多SQL语句不说,还 ...

  2. segmentation fault

    今天在hanoi问题上出现了segmentation fault 在gcc编译的过程中 没出现error,然而程序运行到一半就出现segmentation fault: 上网发现 这条语句是非法的内存 ...

  3. Java--&gt&semi;利用文件指针分割文件

    --> 大体上和字节流分割的方式没什么区别,只是加入文件指针确定要开始分割的位置... package com.dragon.java.splitmp3; import java.io.File ...

  4. 第七届ACM趣味程序设计竞赛第四场（正式赛） 题解

    Final Pan's prime numbers 题目连接: http://acm.uestc.edu.cn/#/problem/show/1272 题意 给你n,要求你在[4,n]范围内找到一个最 ...

  5. Process&period;StandardInput属性

    获取用于写入应用程序输入的流. 命名空间:System.Diagnostics程序集:System(在 system.dll 中) 语法     C# C++ VB   public StreamWr ...

  6. ASP&period;NET自定义控件加载资源WebResource问题

    最近项目用日期控件,想把My97的资源文件跟TextBox封装成一个DatePicker控件,其实很简单的意见事情,但是还是用了一天多的时间,主要的问题就是解决资源文件加载的问题.通过一天多的努力,得 ...

  7. js 停止事件冒泡 阻止浏览器的默认行为&lpar;阻止超连接 &num;&rpar;

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  8. oracle常用cmd命令

    登陆 sqlplus username/password; 切换: conn username/password; 显示当前登陆用户: show user; 查看用户列表 select usernam ...

  9. Forcing restore from package sources

    https://docs.microsoft.com/en-us/nuget/consume-packages/package-restore#forcing-restore-from-package ...

  10. Java中String的hash函数分析

    转载自:http://blog.csdn.net/hengyunabc/article/details/7198533 JDK6的源码: [java] view plaincopy /** * Ret ...

相关文章