原生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模拟订火车票和退票示例
Apr 24 Javascript
js字符串操作方法实例分析
May 06 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
搭建vue开发环境
Jul 19 Javascript
小程序云开发实战小结
Oct 25 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
JavaScript实现动态生成表格
Aug 02 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 MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
AngularJS表单验证功能
2017/10/19 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
解决Layui中layer报错的问题
2019/09/03 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
2020/01/16 Javascript
常见的python正则用法实例讲解
2016/06/21 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
Python基于requests库爬取网站信息
2020/03/02 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
python GUI计算器的实现
2020/10/09 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
三月学雷锋活动总结
2014/06/26 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
2019年12月24日平安夜祝福语集锦
2019/12/24 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL