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 相关文章推荐
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
select标签模拟/美化方法采用JS外挂式插件
Apr 01 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
在JavaScript中如何解决用execCommand(
Oct 19 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
javascript基础知识
Jun 07 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
node 版本切换的实现
Feb 02 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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
JavaScript实现滚动栏效果的方法
2015/04/27 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JS实现黑色大气的二级导航菜单效果
2015/09/18 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Angular中ng-options下拉数据默认值的设定方法
2017/06/21 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
vue使用echarts画组织结构图
2021/02/06 Vue.js
Python中实现对list做减法操作介绍
2015/01/09 Python
python实现Adapter模式实例代码
2018/02/09 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
python tkinter库实现气泡屏保和锁屏
2019/07/29 Python
python利用tkinter实现屏保
2019/07/30 Python
基于python plotly交互式图表大全
2019/12/07 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
django中嵌套的try-except实例
2020/05/21 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
数据库连接池的工作原理
2012/09/26 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
土木工程个人自荐信范文
2013/11/30 职场文书
教师年度考核评语
2014/04/28 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
新郎答谢词
2015/01/04 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
TS 类型兼容教程示例详解
2022/09/23 Javascript