热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

JavaScript生成图形验证码

这篇文章主要为大家详细介绍了JavaScript生成图形验证码的相关代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 

调用方法

var verifyCode = new GVerify(id);

验证方法

if(verifyCode.validate(inputCode)){
  return true;
}esle{
  return false;
}

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


推荐阅读
  • 本文介绍了如何利用 Spring Boot 和 Groovy 构建一个灵活且可扩展的动态计算引擎,以满足钱包应用中类似余额宝功能的推广需求。我们将探讨不同的设计方案,并最终选择最适合的技术栈来实现这一目标。 ... [详细]
  • 本文详细介绍了 Flink 和 YARN 的交互机制。YARN 是 Hadoop 生态系统中的资源管理组件,类似于 Spark on YARN 的配置方式。我们将基于官方文档,深入探讨如何在 YARN 上部署和运行 Flink 任务。 ... [详细]
  • 本文介绍了一个用于 Android 开发的 Logcat 日志管理工具类,该类提供了默认和自定义标签的日志记录方法。通过这种方式,开发者可以更方便地管理和调试应用程序中的日志输出。 ... [详细]
  • 本文提供了 Xcode 12.0 和 12.1(版本号 16B91)开发工具包的下载链接及安装步骤。通过 Finder 和快捷键,您可以轻松访问和配置 DeviceSupport 文件夹,确保 Xcode 正常运行。 ... [详细]
  • 开发笔记:2020 BJDCTF Re encode
    开发笔记:2020 BJDCTF Re encode ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 编程挑战:2019 Nitacm 校赛 D 题 - 雷顿女士与分队(高级版)
    本文深入解析了2019年Nitacm校赛D题——雷顿女士与分队(高级版),详细介绍了问题背景、解题思路及优化方案。 ... [详细]
  • 最近观看了电影《含泪活着》,深受触动。这部电影不仅展现了生活的艰辛与无奈,更传递了坚韧不拔的精神力量。它提醒我们珍惜现实生活中的点滴美好,减少对虚拟世界的沉迷。 ... [详细]
  • 哈密顿回路问题旨在寻找一个简单回路,该回路包含图中的每个顶点。本文将介绍如何判断给定的路径是否构成哈密顿回路。 ... [详细]
  • CentOS系统安装与配置常见问题及解决方案
    本文详细介绍了在CentOS系统安装过程中遇到的常见问题及其解决方案,包括Vi编辑器的操作、图形界面的安装、网络连接故障排除等。通过本文,读者可以更好地理解和解决这些常见问题。 ... [详细]
  • 本文深入探讨了HTTP请求和响应对象的使用,详细介绍了如何通过响应对象向客户端发送数据、处理中文乱码问题以及常见的HTTP状态码。此外,还涵盖了文件下载、请求重定向、请求转发等高级功能。 ... [详细]
  • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
  • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
  • 本主题面向IT专业人士,介绍了Windows Server 2012 R2和Windows Server 2012中的组托管服务账户(gMSA),涵盖了其应用场景、功能改进、硬件和软件要求以及相关资源。 ... [详细]
  • 本文作者分享了在阿里巴巴获得实习offer的经历,包括五轮面试的详细内容和经验总结。其中四轮为技术面试,一轮为HR面试,涵盖了大量的Java技术和项目实践经验。 ... [详细]
author-avatar
水灵ruru
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有