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应该怎样学
Apr 16 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 Javascript
layer父页获取弹出层输入框里面的值方法
Sep 02 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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安全配置
2006/12/06 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP计算日期相差天数实例分析
2016/02/23 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
JavaScript使用cookie
2007/02/02 Javascript
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
2017/10/27 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python3 sleep 延时秒 毫秒实例
2020/05/04 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
我们没有写servlet的构造方法,那么容器是怎么创建servlet的实例呢
2013/04/24 面试题
学生实习推荐信范文
2013/11/26 职场文书
员工年终演讲稿
2014/01/03 职场文书
社区端午节活动方案
2014/01/28 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
Redis Stream类型的使用详解
2021/11/11 Redis