<!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. GreenDao与Rx的完美搭配

    作为Android开发者,一定不会对 GreenDao 和 ReactiveX 陌生. GreenDao   号称Android最快的关系型数据库 ReactiveX    Rx是一个编程模型,目标是 ...

  2. java swing组件的一些基本属性

    JLabel get/setText(): 获取/设置标签的文本. get/seticon(): 获取/设置标签的图片. get/setHorizontalAlignment(): 获取/设置文本的水 ...

  3. lua 条件控制

    lua 条件控制 if 语句 结构 if (condition) then statements end 示例程序 local a = 10 if (a > 1) then print(&quo ...

  4. GPIO的配置过程

    今天看到一篇很好的博文,,看这里:http://www.cnblogs.com/crazyxu/archive/2011/10/14/2212337.html 下面总结一下,加深一下理解. 要使用GP ...

  5. 从网络通信角度谈web性能优化

    衡量一个网站的性能有多个指标,DNS解析时间,TCP链接时间,HTTP重定向时间,等待服务器响应时间等等,从用户角度来看,就可以归结为该网站访问速度的快慢.也就是说性能等于网站的访问速度. 早些年Am ...

  6. CentOS6.5 配置本地Yum源

    一.Yum简介 1.Yum(全称为 Yellow dog Updater, Modified)是一个在Fedora和RedHat以及CentOS中的Shell前端软件包管理器. 2.基于RPM包管理, ...

  7. 跟Microsoft.AspNet.Identity学习哈希加盐法

    什么是哈希加盐法? 废话少说:对于MD5这种加密算法,同样的密码每次加密后得到的密文是一样的,所以黑客可以利用已知的密码库(彩虹库)对目标数据库密文进行对比进行攻击. 怎样解决:哈希加盐法,以下是网上 ...

  8. 一、AspNet Core通过控制台编译程序的基本指令：

    1.先创建文件夹 mkdir "文件夹"2.在对应的文件夹里边 用 dotnet new 命令创建了Program.cs和project.json俩个文件3.使用 dotnet r ...

  9. Java多线程中的单例模式

    一.在多线程环境下创建单例 方式一: package com.ietree.multithread.sync; public class Singletion { private static cla ...

  10. CSS的position/float/display

    一.position position属性取值:static(默认).relative.absolute.fixed.inherit. postision:static:始终处于文档流给予的位置.它可 ...