<!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+css旋转木马层叠轮播

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

  6. 纯js轮播图练习-1

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

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

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

  8. javascript原生js轮播图

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

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

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

随机推荐

  1. 如何通过Mysql的二进制日志恢复数据库数据

    经常有网站管理员因为各种原因和操作,导致网站数据误删,而且又没有做网站备份,结果不知所措,甚至给网站运营和盈利带来负面影响.所以本文我们将和大家一起分享学习下如何通过Mysql的二机制日志(binlo ...

  2. zepto.js介绍

    是一个阉割版的jQuery zepto不支持jQuery过于复杂的选择器,比如:first :last :eq zepto如果要用动画必须再次引包 zepto能将css3中transition支持的动 ...

  3. LVS + keepalived(DR) 实战

    一.LVS体系结构 使用LVS架设的服务器集群系统有三个部分组成:最前端的负载均衡层,用Load Balancer表示,中间的服务器群组层,用Server Array表示,最底端的数据共享存储层,用S ...

  4. 《分布式Java应用之基础与实践》读书笔记一

    分布式Java应用的体系结构知识简单分为: 网络通信:包括协议和IO 消息方式的系统间通信:包括基于Java包.基于开源框架.性能角度 远程调用方式的系统间通信:包括基于Java包.基于开源框架.性能 ...

  5. STM32F4XX与STM32F0XX编程差别

    //普通管脚初始化 /*****************************************************************************STM32F0***** ...

  6. mySql 安装教程

    看了好久别人的文章,今天就开始自己写第一篇.希望给别人能提供帮助,也可以方便自己查阅. 前两天自己安装了mysql,感觉是比oracle好装多了. mysql安装有两种方式,一种是安装包安装方式,一种 ...

  7. Js 网页版扫雷游戏代码实现

    这个游戏是自己在大约一年前联系js熟练度时做的,用的都是基础的东西,最近比较忙没时间整理.直接发给大家,有兴趣的可以看一下.欢迎大家提出建议.如果你有什么新的想法也可以提出来,或者你并不擅长编程.你想 ...

  8. openlayers应用（二）：加载百度离线瓦片

    上一篇文章介绍了使用openlayers3加载百度在线地图,对某些项目或应用场景比如不允许上外网的单位,某些项目只针对一定区域地图加载应用,比如一个县的地图,可以采用下载百度瓦片地图,在服务器或者本机 ...

  9. Yeelink初步体验

    环境 Qemu: 2.8.0 开发板:vexpress-ca9   概述     前面的博文已经使我们的虚拟开发板具备了访问外网的目的,离物联网越来越近了.要玩物联网,Yeelink不得不说,它提供了 ...

  10. ios随机数不重复

     NSMutableArray* Valuearr=[NSMutableArray new];     int counN=9;    for(int i=0;i<counN;i++)  //创 ...