<!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. javascript继承详解（待续）

    常见继承分两种,一种接口继承,继承方法签名:一种实现继承,继承实际方法.js只支持后一种. 1原型链 首先看原型.构造函数.实例的关系.如果我们让一个函数的原型对象等于另一个的实例,然后另一个的原型对 ...

  2. Linux-进程描述（3）之进程状态僵尸进程与孤儿进程

    进程状态 进程状态反映进程执行过程的变化.这些状态随着进程的执行和外界条件的变化而转换.为了弄明正正在运行的进程是什么意思,我们需要知道进程的不同状态.一个进程可以有多个状态(在Linux内核中,进程 ...

  3. Go-Redis

    redis的client有好多好多,go语言的client在redis官方有两个推荐,radix和redigo.选择哪一个好呢?确实很纠结,后来掷硬币决定选择redigo了. redis.go.red ...

  4. 让你的JS代码更具可读性

    一.合理的添加注释 函数和方法--每个函数或方法都应该包含一个注释,描述其目的和用于完成任务所可能使用 的算法.陈述事先的假设也非常重要,如参数代表什么,函数是否有返回值(因为这不能从函 数定义中推断 ...

  5. Java设计模式之（工厂模式）--简单工厂模式--工厂方法模式--抽象工厂模式

    工厂模式: 工厂模式可以分为三类: 1)简单工厂模式(Simple Factory) 2)工厂方法模式(Factory Method) 3)抽象工厂模式(Abstract Factory) 简单工厂模 ...

  6. xmlplus 组件设计系列之五 - 选项卡

    这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为 ...

  7. xmlplus 组件设计系列之八 - 分隔框（DividedBox）

    分隔框(DividedBox)是一种布局类组件,可以分为两类,其中一类叫水平分隔框(HDividedBox),另一类叫垂直分隔框(VDividedBox).水平分隔框会将其子级分为两列,而垂直分隔框则 ...

  8. linux性能分析及调优

    第一节:cpu 性能瓶颈 计算机中,cpu是最重要的一个子系统,负责所有计算任务: 基于摩尔定律的发展,cpu是发展最快的一个硬件,所以瓶颈很少出现在cpu上: 我们线上环境的cpu都是多核的,并且基 ...

  9. FrameBuffer系列 之 一点资源

    Iamonlyme的FrameBuffer编程实例http://download.csdn.net/detail/iamonlyme/6512955 light588的通过framebuffer直接写 ...

  10. 如何在Linux下快速安装MapTiler

    研究背景:          实际项目用到MapTiler时,为了适应项目不同场景需求,需要测试MapTiler在linux下切图速度,这时就涉及到到MapTiler在Linux下安装的问题,从  M ...