JavaScript生成图形验证码


Posted in Javascript onAugust 24, 2020

本文实例为大家分享了js生成图形验证码的具体代码,供大家参考,具体内容如下

getGVerify:function (id)
 {
 
  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{
    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);
    var canvas = document.createElement("canvas");
    /*this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
    this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";*/
    canvas.id = this.options.canvasId;
    canvas.width = this.options.width;
    canvas.height = this.options.height;
    canvas.style.cursor = "pointer";
    canvas.innerHTML = "您的浏览器版本不支持canvas";
    con.appendChild(canvas);
    var parent = this;
    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');
    }
    ctx.textBaseline = "middle";
 
    ctx.fillStyle = randomColor(180, 240);
    ctx.fillRect(0, 0, this.options.width, this.options.height);
 
    if(this.options.type == "blend") { //判断验证码类型
     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 = '20px SimHei';
     //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);
     /**设置旋转角度和坐标原点**/
     ctx.translate(x, y);
     ctx.rotate(deg * Math.PI / 180);
     ctx.fillText(txt, 0, 0);
     /**恢复旋转角度和坐标原点**/
     ctx.rotate(-deg * Math.PI / 180);
     ctx.translate(-x, -y);
    }
    /**绘制干扰线**/
    for(var i = 0; i < 4; i++) {
     ctx.strokeStyle = randomColor(40, 180);
     ctx.beginPath();
     ctx.moveTo(randomNum(0, this.options.width/2), randomNum(0, this.options.height/2));
     ctx.lineTo(randomNum(0, this.options.width/2), 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);
     ctx.fill();
    }
   },
 
   /**验证验证码**/
   validate: function(code){
    var verifyCode = code.toLowerCase();
    var v_code = this.options.code.toLowerCase();
    if(verifyCode == v_code){
     return true;
    }else{
     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 + ")";
  }
 
  return new GVerify(id);
 }

调用方法

var verifyCode = new GVerify(id);

验证方法

if(verifyCode.validate(inputCode)){
  return true;
}esle{
  return false;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS分割字符串并放入数组的函数
Jul 04 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
javascript定时器完整实例
Feb 10 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
Feb 14 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
JavaScript函数节流和函数去抖知识点学习
Jul 31 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
用VsCode编辑TypeScript的实现方法
May 07 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 #Javascript
mac上node.js环境的安装测试
Jul 03 #Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 #Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 #Javascript
vue.js学习之UI组件开发教程
Jul 03 #Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 #Javascript
Vue.js实例方法之生命周期详解
Jul 03 #Javascript
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
php魔术变量用法实例详解
2014/11/13 PHP
试用php中oci8扩展
2015/06/18 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
Laravel使用模型实现like模糊查询的例子
2019/10/24 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
jQuery实现Flash效果上下翻动的中英文导航菜单代码
2015/09/22 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
python抓取网页内容示例分享
2014/02/24 Python
python time模块用法实例详解
2014/09/11 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
python的依赖管理的实现
2019/05/14 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
什么是Python中的顺序表
2020/06/02 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
加拿大留学自荐信
2014/01/28 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
小学数学教师研修日志
2015/11/13 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers