原生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监听浏览器的问题
Jun 23 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
javascript中typeof的使用示例
Dec 19 Javascript
文本框水印提示效果的简单实现代码
Feb 22 Javascript
js获取form的方法
May 06 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
JavaScript实现的超简单计算器功能示例
Dec 23 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
Jun 14 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
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
cakephp常见知识点汇总
2017/02/24 PHP
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
微信小程序之左右布局的实现代码
2019/12/13 Javascript
React中使用Vditor自定义图片详解
2020/12/25 Javascript
JavaScript点击按钮生成4位随机验证码
2021/01/28 Javascript
python方向键控制上下左右代码
2018/01/20 Python
pytorch实现用Resnet提取特征并保存为txt文件的方法
2019/08/20 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
python打包生成so文件的实现
2020/10/30 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
Nike墨西哥官网:Nike MX
2020/08/30 全球购物
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
2014年招商引资工作总结
2014/11/22 职场文书
个人催款函范文
2015/06/24 职场文书
小学三年级班主任工作经验交流材料
2015/11/02 职场文书
用Python实现Newton插值法
2021/04/17 Python