原生js生成图片验证码


Posted in Javascript onOctober 11, 2020

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

html代码

<!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/picCode.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

!(function(window, document) {
 var size = 5;//设置验证码长度
 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');
   }else{
    return;
   }
   
   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 <=size; 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 / (size+1) * 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), randomNum(0, this.options.height));
    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);
    ctx.fill();
   }
  },
  
  /**验证验证码**/
  validate: function(code){
   var code = code.toLowerCase();
   var v_code = this.options.code.toLowerCase();
   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, document);

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

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
vue与vue-i18n结合实现后台数据的多语言切换方法
Mar 08 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
Vue不能观察到数组length的变化
Jun 08 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
js实现石头剪刀布游戏
Oct 11 #Javascript
js+h5 canvas实现图片验证码
Oct 11 #Javascript
vue2和vue3的v-if与v-for优先级对比学习
Oct 10 #Javascript
如何手写简易的 Vue Router
Oct 10 #Javascript
如何手写一个简易的 Vuex
Oct 10 #Javascript
echarts实现晶体球面投影的实例教程
Oct 10 #Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 #Javascript
You might like
第八节 访问方式 [8]
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
实用函数4
2007/11/08 PHP
php email邮箱正则
2008/10/08 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
降低PHP Redis内存占用
2017/03/23 PHP
HTML node相关的一些资料整理
2010/01/01 Javascript
Jquery中显示隐藏的实现代码分析
2011/07/26 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
jquery实现的省市区三级联动
2015/04/02 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JavaScript的模块化开发框架Sea.js上手指南
2016/05/12 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
2018/01/18 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
Python中函数的用法实例教程
2014/09/08 Python
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
python获取本机mac地址和ip地址的方法
2015/04/29 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python中hashlib模块用法示例
2017/10/30 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python3的socket使用方法详解
2020/02/18 Python
PyQt5结合matplotlib绘图的实现示例
2020/09/15 Python
python实现逻辑回归的示例
2020/10/09 Python
python的数学算法函数及公式用法
2020/11/18 Python
Python logging自定义字段输出及打印颜色
2020/11/30 Python
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
2014年度培训工作总结
2014/11/27 职场文书
单位计划生育责任书
2015/05/09 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android