原生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 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
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
PHP用mysql数据库存储session的代码
2010/03/05 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
php写的简易聊天室代码
2011/06/04 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jquery插件制作 表单验证实现代码
2012/08/17 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue-cli + sass 的正确打开方式图文详解
2017/10/27 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
vue强制刷新组件的方法示例
2019/02/28 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
详解python时间模块中的datetime模块
2016/01/13 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python的常见矩阵运算(小结)
2019/08/07 Python
Python简易版停车管理系统
2019/08/12 Python
python无序链表删除重复项的方法
2020/01/17 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
市场营销调查计划书
2014/05/02 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
决心书格式范文
2015/09/23 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
团干部培训班心得体会
2016/01/06 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android