当前位置： 首页 > news >正文

js实现图形验证码

news 2025/12/29 11:21:16

图形验证码起什么作用：

可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。

验证码一般是防止批量注册的，人眼看起来都费劲，何况是机器。不少网站为了防止用户利用机器人自动注册、登录、灌水，都采用了验证码技术。所谓验证码，就是将一串随机产生的数字或符号，生成一幅图片， 图片里加上一些干扰。

例如随机画数条直线，画一些点（防止OCR），由用户肉眼识别其中的验证码信息，输入表单提交网站验证，验证成功后才能使用某项功能。

怎么实现图形验证码

原理：

1. 创建canvas元素,设置宽高等参数

2. 在canvas上绘制复杂的背景和前景噪点干扰线,增加识别难度

3. 随机生成数字/字母,通过旋转、移动、变形来绘制文本

4. 绘制完成后,把生成的验证码保存在实例的code属性中

5. 用户输入验证码与code属性中的值进行对比验证

6. 验证失败则重新生成验证码图形和code值

具体来看,主要步骤是:

  •  初始化时设置canvas参数,定义文本字符数组
  •  refresh方法用来生成验证码图形   - 绘制背景色和矩形框
  •                                                        - 随机生成文字,设置样式并旋转绘制
  •                                                        - 绘制干扰线和噪点
  • validate方法用来比对用户输入和验证码的值
  • 调用refresh重新生成验证码图形captcha的安全性就在于背景干扰线、噪点以及文字扭曲变形,使机器无法准确识别文字。同时验证码的值保存在内存中,不存入数据库,验证后即被清除,保证了每次都是新的验证码。这就是一个典型的前端图形验证码实现的基本流程和原理。可以根据需要对验证码样式、文字、长度等进行自定义。

代码：

html 

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>图形验证码</title></head><style>#app{margin-top: 160px;width: 500px;height: 300px;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 2px solid pink;}#my_body{width: 200px;display: flex;align-items: center;justify-content: space-between;}#code_input{width: 120px;height: 20px;line-height: 20px;}#code_input:focus {outline: 0;}#my_button{width: 50px;height: 24px;}#v_container{margin-bottom: 50px;width: 200px;height: 50px;}</style><body><div id="app"><div id="v_container" ></div><div id="my_body"><input type="text" id="code_input" value="" placeholder="请输入验证码"/><button id="my_button">验证</button></div></div></body><script src="gVerify.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) {function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数this.options = { //默认options参数值id: "", //容器IdcanvasId: "verifyCanvas", //canvas的IDwidth: "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 <= 4; 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 / 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), 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();console.log(v_code);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);

效果：

     

相关文章：

js实现图形验证码

图形验证码起什么作用&#xff1a; 可以防止&#xff1a;恶意破解密码、刷票、论坛灌水&#xff0c;有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试。 验证码一般是防止批量注册的&#xff0c;人眼看起来都费劲&#xff0c;何况是机器。不少…...

编程日记 2023/9/2 11:12:32

一句话画出动漫效果

链接&#xff1a; AI Comic Factory - a Hugging Face Space by jbilcke-hfDiscover amazing ML apps made by the communityhttps://huggingface.co/spaces/jbilcke-hf/ai-comic-factory 选择类型&#xff1a; Japanese 输入提示词&#xff1a; beauty and school love st…...

编程日记 2023/9/2 11:11:31

【openGauss2.1.0 TPC-C数据导入】

openGauss2.1.0 TPC-C数据导入 一、下载tpch测试数据二、导入测试数据 一、下载tpch测试数据 使用普通用户如omm登录服务器执行如下命令下载测试数据库&#xff1a;git clone https://gitee.com/xzp-blog/tpch-kit.git二、导入测试数据 进入dbgen目录下&#xff0c;生成makef…...

编程日记 2023/9/2 11:10:30

vue+elementui表格导出

htmlToExcel.js import FileSaver from file-saver import XLSX from xlsxconst htmlToExcel {getExcel(dom, title 默认标题) {var excelTitle titlevar wb XLSX.utils.table_to_book(document.querySelector(dom))/* 获取二进制字符串作为输出 */var wbout XLSX.write(w…...

编程日记 2023/9/2 11:09:29

掌握前端利器：JavaScript页面渲染高阶方法解析与实战

引言 前端开发中&#xff0c;页面渲染的速度和质量是衡量一个开发者水平的重要标准。而在众多的前端技术中&#xff0c;JavaScript以其强大的页面渲染能力独占鳌头。本文将深入探讨JavaScript在页面渲染中的应用&#xff0c;并通过实例展示其高阶方法&#xff0c;旨在帮助读者…...

编程日记 2023/9/2 11:08:28

面试题——网络IO模型

一、socket socket是在应用层和传输层中间的抽象层&#xff0c;它把传输层&#xff08;TCP/UDP&#xff09;的复杂操作抽象成一些简单的接口&#xff0c;供应用层调用实现进程在网络中的通信。Socket起源于UNIX&#xff0c;在Unix一切皆文件的思想下&#xff0c;进程间通信就被…...

编程日记 2023/9/2 11:07:27

【JUC基础】JUC入门基础（二）

目录 异步回调JMM 理解对 volatile 的理解1、保证可见性2、不保证原子性3、禁止指令重排 对 JMM 的理解 详解单例模式饿汉式懒汉式DCL懒汉式&#xff1a;双重检测锁模式的懒汉式单例静态内部类实现单例通过反射破坏单例&#xff0c;修改后的DCL饿汉式枚举实现单例防止反射破坏 …...

编程日记 2023/9/2 11:06:26

Git Bash 和 Git GUI中文汉化

目录 为什么要中文汉化&#xff1f;Git Bash的汉化Git GUI的汉化 为什么要中文汉化&#xff1f; 看到中文大概能猜出是什么意思&#xff0c;便于使用&#xff0c;特别是Git GUI&#xff0c;中文版的菜单很容易理解是要做什么&#xff0c;如下图&#xff1a; Git Bash的汉化 …...

编程日记 2023/9/2 11:05:25

【Ubuntu】Ubuntu常用软件部署

1.安装jdk1.8 (1).apt方式安装 1).安装 1.在终端中输入以下命令&#xff0c;以更新软件包列表 sudo apt-get update2.在终端中输入以下命令&#xff0c;以安装JDK 1.8 sudo apt-get install openjdk-8-jdk3.将Java 1.8设置为默认版本。在终端中输入以下命令 sudo update-…...

编程日记 2023/9/2 11:04:23

Hadoop HA模式切换

Hadoop HA模式下 主从的切换&#xff08;操作命令&#xff09; YARN HA 获取所有RM节点的状态 yarn rmadmin -getAllServiceState获取 rm1 节点的状态 yarn rmadmin -getServiceState rm1手动将 rm1 的状态切换到STANDBY yarn rmadmin -transitionToStandby rm1 ##或者 y…...

编程日记 2023/9/2 11:03:22

自然语言处理(四)：全局向量的词嵌入（GloVe）

全局向量的词嵌入&#xff08;GloVe&#xff09; 全局向量的词嵌入&#xff08;Global Vectors for Word Representation&#xff09;&#xff0c;通常简称为GloVe&#xff0c;是一种用于将词语映射到连续向量空间的词嵌入方法。它旨在捕捉词语之间的语义关系和语法关系&#…...

编程日记 2023/9/2 11:02:21

Flink中RPC实现原理简介

前提知识 Akka是一套可扩展、弹性和快速的系统&#xff0c;为此Flink基于Akka实现了一套内部的RPC通信框架&#xff1b;为此先对Akka进行了解 Akka Akka是使用Scala语言编写的库&#xff0c;基于Actor模型提供一个用于构建可扩展、弹性、快速响应的系统&#xff1b;并被应用…...

编程日记 2023/9/2 11:01:19

ELK安装、部署、调试（五）filebeat的安装与配置

1.介绍 logstash 也可以收集日志&#xff0c;但是数据量大时太消耗系统新能。而filebeat是轻量级的&#xff0c;占用系统资源极少。 Filebeat 由两个主要组件组成&#xff1a;harvester 和 prospector。 采集器 harvester 的主要职责是读取单个文件的内容。读取每个文件&…...

编程日记 2023/9/2 11:00:18

Python数据分析案例30——中国高票房电影分析（爬虫获取数据及分析可视化全流程）

案例背景 最近总看到《消失的她》票房多少多少&#xff0c;《孤注一掷》票房又破了多少多少..... 于是我就想自己爬虫一下获取中国高票房的电影数据&#xff0c;然后分析一下。 数据来源于淘票票&#xff1a;影片总票房排行榜 (maoyan.com) 爬它就行。 代码实现 首先爬虫获…...

编程日记 2023/9/2 10:59:17

科技资讯|苹果Vision Pro头显申请游戏手柄专利和商标

苹果集虚拟现实和增强现实于一体的头戴式设备 Vision Pro 推出一个月后&#xff0c;美国专利局公布了两项苹果公司申请的游戏手柄专利&#xff0c;其中一项的专利图如下图所示。据 PatentlyApple 报道&#xff0c;虽然专利本身并不能保证苹果公司会推出游戏手柄&#xff0c;但是…...

编程日记 2023/9/2 10:58:16

Compose学习 - remember、mutableStateOf的使用

一、需求 在显示界面中&#xff0c;数据变动&#xff0c;界面刷新是非常常见的操作&#xff0c;所以使用compose该如何实现呢&#xff1f; 二、remember、mutableStateOf的使用 我们可以借助标题的两个概念 remember、mutableStateOf来完成。这里先不写定义&#xff0c;定义…...

编程日记 2023/9/2 10:57:15

字符串哈希

字符串前缀哈希法 str "ABCABCDEHGJK" 预处理每一个前缀的哈希值,如 : h[0] 0; h[1] "A"的哈希值 h[2] "AB"的哈希值 h[3] "ABC"的哈希值 h[4] "ABCA"的哈希值 问题 : 如何定义一个前缀的哈希值 : 将字符串看…...

编程日记 2023/9/2 10:56:13

【python】【centos】使用python杀死进程后自身也会退出

问题 使用python杀死进程后自身程序也会退出&#xff0c;无法执行后边的代码 这样不行&#xff1a; # cmd " ps -ef | grep -v grep | grep -E task_pull_and_submit.py$|upgrade_system.py$| awk {print $2}"# pids os.popen(cmd).read().strip(\n).split(\n)# p…...

编程日记 2023/9/2 10:55:12

【ES系列】(一)简介与安装

首发博客地址 首发博客地址[1] 系列文章地址[2] 教学视频[3] 为什么要学习 ES? 强大的全文搜索和检索功能&#xff1a;Elasticsearch 是一个开源的分布式搜索和分析引擎&#xff0c;使用倒排索引和分布式计算等技术&#xff0c;提供了强大的全文搜索和检索功能。学习 ES 可以掌…...

编程日记 2023/9/2 10:54:11

opencv案例06-基于opencv图像匹配的消防通道障碍物检测与深度yolo检测的对比

基于图像匹配的消防通道障碍物检测 技术背景 消防通道是指在各种险情发生时&#xff0c;用于消防人员实施营救和被困人员疏散的通道。消防法规定任何单位和个人不得占用、堵塞、封闭消防通道。事实上&#xff0c;由于消防通道通常缺乏管理&#xff0c;导致各种垃圾&#xff0…...

编程日记 2023/9/2 10:53:10

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2025/12/25 1:27:31

DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

编程新知 2025/12/21 9:43:13

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/12/28 1:56:49

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/12/26 15:05:09

WPF八大法则：告别模态窗口卡顿

⚙️ 核心问题&#xff1a;阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程&#xff0c;导致后续逻辑无法执行&#xff1a; var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题&#xff1a…...

编程新知 2025/12/26 3:45:03

深度学习之模型压缩三驾马车：模型剪枝、模型量化、知识蒸馏

一、引言 在深度学习中&#xff0c;我们训练出的神经网络往往非常庞大&#xff08;比如像 ResNet、YOLOv8、Vision Transformer&#xff09;&#xff0c;虽然精度很高&#xff0c;但“太重”了&#xff0c;运行起来很慢&#xff0c;占用内存大&#xff0c;不适合部署到手机、摄…...

编程新知 2025/9/24 3:56:34

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...

编程新知 2025/9/19 5:31:38

JS红宝书笔记 - 3.3 变量

要定义变量&#xff0c;可以使用var操作符&#xff0c;后跟变量名 ES实现变量初始化&#xff0c;因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符&#xff0c;可以创建一个全局变量 如果需要定义…...

编程新知 2025/11/29 5:47:26

C++11 constexpr和字面类型：从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...

编程新知 2025/12/25 18:15:25