纯JS实现图片验证码功能并兼容IE6-8(推荐)


Posted in Javascript onApril 19, 2017

最近要搞一个图片验证码功能,但是又不想自己写后台代码。于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美。不过后面接到说要兼容IE8,想想也是醉了。万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识。下面看我是如何搞定它的,虽然花了一点时间,不过也值得。

使用方法

使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID。这样就生成了一验证码,效果见下图1-1.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图形验证码</title>
  </head>
  <body>
    <div id="v_container" style="width: 200px;height: 50px;"></div>
    <input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
  </body>
  <script src="js/gVerify.js"></script>
  <script>
    var verifyCode = new GVerify("v_container");

    document.getElementById("my_button").onclick = function(){
      var res = verifyCode.validate(document.getElementById("code_input").value);
      if(res){
        alert("验证正确");
      }else{
        alert("验证码错误");
      }
    }
  </script>
</html>

纯JS实现图片验证码功能并兼容IE6-8(推荐)

图1-1

 

效果还不错,大功告成。分分钟搞定,在各个浏览器点了点都没有撒问题。不过一到IE下面就GG了,IE9都还有用,IE8就没有用了,只能看看它怎么实现的了。于是我打开源码,发现是canvas实现的,IE8以下不支持呀,这就尴尬了。然后我特意去看了看canvas这个元素的相关介绍,发现还真被我找到猫腻了。"我们甚至可以在 IE 中使用 <canvas> 标记,并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码(由 Google 发起)来构建兼容性的画布。 参见:http://excanvas.sourceforge.net/。",看到这一句我感觉我有搞头了,于是马上下载了一个excanvas.js加载到页面上,以为添加一个js就可以了,结果也是发现果然好使,正准备炫耀我的成果时,发现是IE11,不对劲呀!于是调整到IE8发现还不行,果然没有想的这么简单。于是看了一遍插件源码,木有发现问题呀,也不报错。于是只能搜索看是什么问题了。

改造

查了一下资料发现是createelement()这个方法插件canvas在IE8以下也是不支持的,只能先在页面写上canvas元素。于是我改造了一下页面,并把创建canvas的代码修改为获得了。并把源代码加了一部分注释。使用方式变为了如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>图形验证码</title>
  </head>
  <body>


<div id="v_container" style="width: 100px;height: 40px;position: relative;top: -61px;left: 230px;">




<canvas id="verifyCanvas" width="100" height="40" style="cursor: pointer;"></canvas>



</div>



<input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button>
  </body>
  <script src="js/gVerify.js"></script>
  <script>
    var verifyCode = new GVerify("v_container");
    document.getElementById("my_button").onclick = function(){
      var res = verifyCode.validate(document.getElementById("code_input").value);
      if(res){
        alert("验证正确");
      }else{
        alert("验证码错误");
      }
    }
  </script>
</html>

源码做了如下修改(红色的为修改的部分)和注释:

!(function(window, document) {
  function GVerify(options) { //创建一个图形验证码对象,接收options对象为参数
    this.options = { //默认options参数值
      id: "", //容器Id
      canvasId: "verifyCanvas", //canvas的ID
      width: "100", //默认canvas宽度
      height: "30", //默认canvas高度
      type: "blend", //图形验证码默认类型blend:数字字母混合类型、number:纯数字、letter:纯字母
      code: ""
    }
    if(Object.prototype.toString.call(options) == "[object Object]"){//判断传入参数类型
      for(var i in options) { //根据传入的参数,修改默认参数值
        this.options[i] = options[i];
      }
    }else{//传入单个对象就是id
      this.options.id = options;
    }
    this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");//数字
    this.options.letterArr = getAllLetter();//生成字母数组
    this._init();//初始化
    this.refresh();//生成验证码
  }
  GVerify.prototype = {
    /**版本号**/
    version: '1.0.0',
    /**初始化方法**/
    _init: function() {
      var con = document.getElementById(this.options.id);//获得验证码的DIV
      var canvas = document.getElementById(this.options.canvasId);//获得画布  IE不能支持canvas,可以增加excanvas.js插件,但是还是不支持createelement()的形式
      this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";//如果有宽度就使用自己的,没有就默认100
      this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";//如果有长度就使用自己的,没有就默认30
    //  canvas.id = this.options.canvasId;//为兼容IE把这些去掉
    //  canvas.width = this.options.width;
    //  canvas.height = this.options.height;
    //  canvas.style.cursor = "pointer";
    //  canvas.innerHTML = "您的浏览器版本不支持canvas";
    //  con.appendChild(canvas);
      var parent = this;//把this赋值parent
      canvas.onclick = function(){//验证码点击切换刷新
        parent.refresh();
      }
    },
    /**生成验证码**/
    refresh: function() {
      this.options.code = "";//定义验证码为""
      var canvas = document.getElementById(this.options.canvasId);//获得验证码画布
      if(canvas.getContext) {//
        var ctx = canvas.getContext('2d');//获得绘画对象
      }else{//
        return;
      }
      ctx.textBaseline = "middle";
      ctx.fillStyle = randomColor(180, 240);
      ctx.fillRect(0, 0, this.options.width, this.options.height);//绘制矩形 
      /* x:矩形起点横坐标(坐标原点为canvas的左上角,当然确切的来说是原始原点,后面写到变形的时候你就懂了,现在暂时不用关系)
       y:矩形起点纵坐标
       width:矩形长度
       height:矩形高度*/ 
      if(this.options.type == "blend") { //判断验证码类型 blend:数字字母混合类型、number:纯数字、letter:纯字母
        var txtArr = this.options.numArr.concat(this.options.letterArr);
      } else if(this.options.type == "number") {
        var txtArr = this.options.numArr;
      } else {
        var txtArr = this.options.letterArr;
      }
      for(var i = 1; i <= 4; i++) {
        var txt = txtArr[randomNum(0, txtArr.length)];//取得一个字符
        this.options.code += txt;//连接验证码
        ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; //随机生成字体大小
        ctx.fillStyle = randomColor(50, 160); //填充的样式 随机生成字体颜色    
        ctx.shadowOffsetX = randomNum(-3, 3);//阴影的横向位移量
        ctx.shadowOffsetY = randomNum(-3, 3);//阴影的纵向位移量
        ctx.shadowBlur = randomNum(-3, 3);//阴影的模糊范围(值越大越模糊)
        ctx.shadowColor = "rgba(0, 0, 0, 0.3)";//阴影的颜色
        var x = this.options.width / 5 * i;
        var y = this.options.height / 2;
        var deg = randomNum(-30, 30);
        /**设置旋转角度和坐标原点
         * 
         * 平移context.translate(x,y)
         *  x:坐标原点向x轴方向平移x
         *  y:坐标原点向y轴方向平移y
         * 
         * **/
        ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);//旋转context.rotate(angle)
        ctx.fillText(txt, 0, 0);//context.fillText(text,x,y) 
        /**恢复旋转角度和坐标原点**/
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
      }
      /**绘制干扰线**/
      for(var i = 0; i < 4; i++) {
        ctx.strokeStyle = randomColor(40, 180);//随机颜色
        ctx.beginPath();//路径 context.beginPath()
        ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));//绘制线段 context.moveTo(x,y) context.lineTo(x,y)
        ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
        ctx.stroke();
      }
      /**绘制干扰点**/
      for(var i = 0; i < this.options.width/4; i++) {
        ctx.fillStyle = randomColor(0, 255);
        ctx.beginPath();
        ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);// 圆弧context.arc(x, y, radius, starAngle,endAngle, anticlockwise)
        ctx.fill();
      }
    },
    /**验证验证码**/
    validate: function(code){
      var code = code.toLowerCase();
      var v_code = this.options.code.toLowerCase();
      //console.log(v_code);
      if(code == v_code){
        return true;
      }else{
        this.refresh();
        return false;
      }
    }
  }
  /**生成字母数组**/
  function getAllLetter() {
    var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
    return letterStr.split(",");
  }
  /**生成一个随机数**/
  function randomNum(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  }
  /**生成一个随机色**/
  function randomColor(min, max) {
    var r = randomNum(min, max);
    var g = randomNum(min, max);
    var b = randomNum(min, max);
    return "rgb(" + r + "," + g + "," + b + ")";
  }
  window.GVerify = GVerify;//设置为window对象
})(window, document);

总结

1、要支持IE的canvas要引入wxcanvas.js并修改源码为获取canvas元素。

2、在html中要加上div和canvas元素。

在秀一波我的验证码,哈哈

纯JS实现图片验证码功能并兼容IE6-8(推荐)纯JS实现图片验证码功能并兼容IE6-8(推荐)纯JS实现图片验证码功能并兼容IE6-8(推荐)

以上所述是小编给大家介绍的纯JS实现图片验证码功能并兼容IE6-8(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用Javascript读取中文COOKIE的解决办法
Feb 15 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
js 中的switch表达式使用示例
Jun 03 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
angular 服务随记小结
May 06 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 #Javascript
JavaScript实现前端分页控件
Apr 19 #Javascript
vue动态生成dom并且自动绑定事件
Apr 19 #Javascript
Vue响应式原理详解
Apr 18 #Javascript
详解vue-router基本使用
Apr 18 #Javascript
Vue键盘事件用法总结
Apr 18 #Javascript
javascript实现日期三级联动下拉框选择菜单
Dec 03 #Javascript
You might like
php输入流php://input使用浅析
2014/09/02 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jQuery实现简单的网页换肤效果示例
2016/09/18 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
JavaScript学习总结之正则的元字符和一些简单的应用
2017/06/30 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
JS监听事件的叠加和移除功能
2018/11/19 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
小程序实现录音功能
2020/09/22 Javascript
python中精确输出JSON浮点数的方法
2014/04/18 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
wxPython之解决闪烁的问题
2018/01/15 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
本科毕业生求职自荐信
2014/02/03 职场文书
给校长的一封建议书
2014/03/12 职场文书
教师工作失职检讨书
2014/09/18 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
公司地址变更通知
2015/04/25 职场文书
公司承诺书格式范文
2015/04/28 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
redis复制有可能碰到的问题汇总
2022/04/03 Redis