前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
图形验证码是网站安全防护的重要组成部分,能有效防止自动化脚本进行恶意操作,如何实现一个简单的运算图形验证码?本文封装了一个简单的js类,可以用于生成简单但安全的图形验证码。它支持自定义验证码样式,包括字体大小、颜色以及干扰线的数量和样式。如下图。
![]()
核心js文件如下:
// mcaptcha.jsexport class Mcaptcha {constructor(options) {this.options = options;this.fontSize = 24;this.init();this.refresh();}init() {this.ctx = wx.createCanvasContext(this.options.el);this.ctx.setTextBaseline("middle");this.ctx.setFillStyle(this.randomColor(180, 240));}refresh() {var code = '';var num1 = this.randomNum(0, 9)var num2 = this.randomNum(0, 9)this.options.createCodeImg = code;code = num1 + '+' + num2 + '=?'this.options.num1 = num1;this.options.num2 = num2;let arr = [code]if (arr.length === 0) {arr = ['e', 'r', 'r', 'o', 'r'];};let offsetLeft = this.options.width * 0.6 / (arr.length - 1);let marginLeft = this.options.width * 0.2;arr.forEach((item, index) => {this.ctx.setFillStyle(this.randomColor(0, 180));let size = this.randomNum(24, this.fontSize);this.ctx.setFontSize(size);let dis = offsetLeft * index + marginLeft - size * 0.3;let deg = this.randomNum(-1, 1);this.ctx.translate(dis, this.options.height * 0.45);this.ctx.rotate(deg * Math.PI / 180);this.ctx.fillText(item, 2, this.randomNum(0,10));this.ctx.rotate(-deg * Math.PI / 180);this.ctx.translate(-20, -this.options.height * 0.6);})for (var i = 0; i < 4; i++) {this.ctx.strokeStyle = this.randomColor(40, 180);this.ctx.beginPath();this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height));this.ctx.stroke();}for (var i = 0; i < this.options.width / 4; i++) {this.ctx.fillStyle = this.randomColor(0, 255);this.ctx.beginPath();this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI);this.ctx.fill();}this.ctx.draw();}validate(code) {var code = Number(code)var v_code = this.options.num1 + this.options.num2if (code == v_code) {return true} else {this.refresh()return false}}randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}randomColor(min, max) {let r = this.randomNum(min, max);let g = this.randomNum(min, max);let b = this.randomNum(min, max);return "rgb(" + r + "," + g + "," + b + ")";}
}
使用方法
以微信小程序为例,其他环境适当修改。
- 引入Mcaptcha.js
import Mcaptcha from './mcaptcha.js';
2.初始化Mcaptcha实例
在你的页面的JS文件中,创建一个Mcaptcha实例,并传入相应的配置选项。
Page({onLoad: function() {new Mcaptcha({el: 'captchaCanvas', // canvas的IDwidth: 300, // canvas的宽度height: 150 // canvas的高度});}
});
3.在WXML中添加Canvas元素
在页面的WXML文件中,添加一个Canvas元素,用于展示验证码。
<canvas canvas-id="captchaCanvas" style="width: 300px; height: 150px;"></canvas>
4.使用Mcaptcha实例生成验证码
调用Mcaptcha实例的refresh方法来生成验证码。
Page({// ...onShow: function() {// 假设mcaptcha是之前创建的Mcaptcha实例mcaptcha.refresh();}
});
5.验证用户输入
当用户输入验证码并提交时,调用Mcaptcha实例的validate方法进行验证
Page({// ...checkCaptcha: function(inputCode) {// 假设mcaptcha是之前创建的Mcaptcha实例if (mcaptcha.validate(inputCode)) {wx.showToast({title: '验证成功!',icon: 'success'});} else {wx.showToast({title: '验证失败,请重试。',icon: 'none'});}}
});
Mcaptcha.js的核心方法
refresh(): 生成新的验证码,包括随机数字、运算符和干扰元素。validate(code): 验证用户输入的验证码是否正确,返回布尔值。randomNum(min, max): 生成指定范围内的随机数。randomColor(min, max): 生成指定范围内的随机颜色。
相关文章:
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
图形验证码是网站安全防护的重要组成部分,能有效防止自动化脚本进行恶意操作,如何实现一个简单的运算图形验证码?本文封装了一个简单的js类,可以用于生成简单但安全的图形验证码。它支持自定义验证码样式,包括字体大小…...
SQL Server 语句日期格式查找方法
1. SQL Server中,处理日期格式和查找特定日期格式方法示例 在SQL Server中,处理日期格式和查找特定日期格式的记录是一个常见的需求。SQL Server提供了多种函数和格式选项来处理和比较日期。以下是一个详细的示例,展示了如何根据特定日期格式…...
【Python报错已解决】python setup.py bdist_wheel did not run successfully.
🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 专栏介绍 在软件开发和日常使用中,BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…...
查询结果是1条记录,但执行更新却是2条记录原因查找
1、问题 在 sqlserver2008 数据库 select * from userinfo WHERE username SP4267ED2409011; 查询结果是1条记录,但执行更新 UPDATE userinfo SET qt qt 2.0 WHERE username SP4267ED2409011; 结果是这样的 Affected rows: 1 Affected rows: 1 返回了2个&#x…...
校园网站的管理与建设心得体会
随着时代发展的需要,学校网站建设如雨后春笋般的涌现出来。在这股大潮的带动下我校校园网网站建设也逐步开展深入。通过数年的发展,我校的校园网建设取得了长足发展,架构了数字化交流平台,整理了专题学习网站资源,开设…...
智慧农业——InsectMamba利用状态空间模型对害虫进行分类
介绍 论文地址:https://arxiv.org/abs/2404.03611 害虫分类是农业中的一个重要问题。准确识别有害害虫可减少对作物的损害,确保粮食安全和环境的可持续发展。然而,害虫及其自然环境的高度拟态性和物种多样性使得视觉特征的提取极具挑战性。…...
基于机器学习的癌症数据分析与预测系统实现,有三种算法,bootstrap前端+flask
研究背景 癌症作为全球范围内最主要的死亡原因之一,已成为当代医学研究和公共健康的重大挑战。据世界卫生组织(WHO)的统计,癌症每年导致全球数百万人的死亡。随着人口老龄化、环境污染和生活方式的改变,癌症的发病率逐…...
docker|Oracle数据库|docker快速部署Oracle11g和数据库的持久化(可用于生产环境)
一、 容器数据持久化的概念 docker做为容器化的领先技术,现在广泛应用于各个平台中,但不知道什么时候有一个说法是docker并不适用容器化数据库,说容器化的数据库性能不稳定,其实,这个说法主要是因为对docker的数据持…...
uni-app 聊天界面滚动到消息底部
目录 问题 组件 页面 使用的API 总结 问题 当你发一个消息,但是消息却需要你自己向下滑你才能看见,否则一直呗输入框挡住。 组件 scroll-view组件:一般使用scroll-view组件的都采取使用其scroll-into-view或者scroll-to属性。 scroll-…...
学习风格的类型
学习风格是指个体在学习过程中偏好的方式和方法。不同的学习风格反映了人们在接收、处理和记忆信息方面的不同偏好。了解自己的学习风格可以帮助提高学习效率和效果。以下是几种常见的学习风格类型: 1. 视觉型(Visual Learner) 特点&#x…...
GCP容器镜像仓库使用
GCP容器镜像仓库产品为:Artifact Registry。 1)用户账号认证 GCP需要前置在控制台登陆对应环境账号。然后执行以下命令操作: $ gcloud auth login 2)登陆镜像仓库 $ gcloud auth configure-docker us-west1-docker.pkg.dev …...
【C++ Primer Plus习题】16.10
大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> #include <string> #include <…...
Django框架全面指南
Django是一个高级的Python Web框架,它鼓励快速开发和清晰、实用的设计。本指南将全面介绍Django的核心概念和使用方法。 1. Django简介 Django遵循"batteries included"哲学,提供了Web开发所需的几乎所有功能。它的主要特点包括: ORM(对象关系映射)URL路由模板…...
git 更新LingDongGui问题解决
今天重新更新灵动gui的代码,以便使用最新的arm-2d,本来以为是比较简单的一件事情(因为以前已经更新过一次),却搞了大半天,折腾不易啊,简单记录下来,有同样遇到问题的同学参考&#x…...
Thymeleaf模版引擎
Thymeleaf是面向Web和独立环境的现代服务器端Java模版引擎,能够处理HTML、XML、JavaScript、CSS甚至纯文本。Thymeleaf旨在提供一个优雅的、高度可维护的创建模版的方式。为了实现这一目标,Thymeleaf建立在自然模版的概念上,将其逻辑注入到模…...
jpa适配mysql切换达梦可能的坑
1、liquibase脚本 (1)达梦数据库不支持,修改字段varchar改成blob <changeSet author"ly" id"v3.0_4_202307111505_101"><renameColumn tableName"PC_SS_ZRQD" oldColumnName"BHNR" newCo…...
922. 按奇偶排序数组 II 双指针 力扣
922. 按奇偶排序数组 II 已解答 简单 相关标签 相关企业 给定一个非负整数数组 nums, nums 中一半整数是 奇数 ,一半整数是 偶数 。 对数组进行排序,以便当 nums[i] 为奇数时,i 也是 奇数 ;当 nums[i] 为偶数时…...
Vue接入高德地图并实现基本的路线规划功能
目录 一、申请密钥 二、安装依赖 三、代码实现 四、运行截图 五、官方文档 一、申请密钥 登录高德开放平台,点击我的应用,先添加新应用,然后再添加Key。 如图所示填写对应的信息,系统就会自动生成。 二、安装依赖 npm i am…...
linux网络编程4
24.9.20学习目录 一.UDP(续)1.广播广播流程 2.多播多播流程 一.UDP(续) 1.广播 由一台主机向该主机所在子网内的所有主机发送数据的方式; 广播只能用UDP或原始IP实现,不能使用TCP; 其作用是将…...
Spring模块详解Ⅳ(Spring ORM和Spring Transaction)
目录 Spring ORM(Object-Relational Mapping)作用核心组件使用步骤事务管理代码演示优点挑战总结 Spring Transaction(Spring事务管理)事务的基本概念Spring事务管理的类型声明式事务管理事务的传播行为(Propagation&a…...
HAL_NVIC
文章目录一、NVIC简介 NVIC 做什么?二、NVIC模块详解 1、NVIC 寄存器 2、优先级的定义 1.优先级寄存器NVIC_IPRx 2.优先级分组3、NVIC 工作完整流程 4、F103中断向量表 1.内核异常向量(固定,所有 CM…...
Qwen3-14B私有化部署指南:基于RTX 4090D的GPU算力优化全流程
Qwen3-14B私有化部署指南:基于RTX 4090D的GPU算力优化全流程 1. 镜像概述与核心优势 Qwen3-14B是通义千问推出的大语言模型,具备强大的对话、推理和生成能力。本镜像针对RTX 4090D显卡进行了深度优化,解决了大模型私有化部署中的三大痛点&a…...
KeyboardChatterBlocker:如何解决机械键盘的“幽灵按键“问题?
KeyboardChatterBlocker:如何解决机械键盘的"幽灵按键"问题? 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocke…...
从零上手!用 Python+OpenCV 实现 LBPH 人脸识别,小白也能跑通
一、写在前面:人脸识别到底是什么?你有没有好奇过,手机的人脸解锁、门禁的刷脸开门,到底是怎么认出你的?其实核心逻辑很简单:先 “记住” 人脸:把你的多张照片喂给算法,让它学习你的…...
网站纠错页面对 SEO 有什么作用_网站图片和视频优化对 SEO 有什么技巧
网站纠错页面对 SEO 有什么作用 在网站管理和搜索引擎优化(SEO)方面,纠错页面的作用常常被忽视。网站纠错页面实际上对 SEO 有着重要的影响。当用户访问一个网站时,如果遇到 404 错误(页面未找到)或其他错…...
Python绘图进阶:掌握颜色代码与实战应用
1. Python绘图中的颜色表示方法全解析 第一次用Python画图时,我对着那一堆颜色参数完全摸不着头脑。为什么同样的红色可以用"red"、"(1,0,0)"、"#FF0000"这么多种方式表示?后来才发现,这些不同的颜色表示方法各…...
千问3.5-9B Visio图表智能生成:从文本描述到专业架构图
千问3.5-9B Visio图表智能生成:从文本描述到专业架构图 1. 效果惊艳的智能图表生成 想象一下,你只需要用简单的文字描述系统架构,就能在几分钟内获得专业的Visio图表。千问3.5-9B让这个场景成为现实。这个模型不仅能理解复杂的系统架构描述…...
Phi-4-mini-reasoning推理能力展示:多步分析题目的简洁结论生成效果
Phi-4-mini-reasoning推理能力展示:多步分析题目的简洁结论生成效果 1. 模型介绍 Phi-4-mini-reasoning是一款专注于推理任务的文本生成模型,特别擅长处理需要多步分析的题目。与通用聊天模型不同,它被设计用来解决数学题、逻辑题等需要严谨…...
当AI真正“看懂“你的屏幕:GPT-5.4如何重新定义人机协作的边界
摘要: 2026年3月,OpenAI发布了GPT-5.4。这不是一次普通的模型迭代,而是一次能力边界的重新定义——它首次实现了原生的"计算机使用"能力,能在桌面上像人类一样点击按钮、填写表单、操作软件;它拥有五级可调的…...
TDEFNODE 安装与入门:从源码编译到成功跑通案例(超详细避坑指南)
TDEFNODE 安装与入门:从源码编译到成功跑通案例(超详细避坑指南) 一、前言 TDEFNODE 是一个用于地壳形变建模的经典科研程序,常用于 GNSS 速度场反演、块体运动分析以及断层滑动研究。 但与常见软件不同:TDEFNODE 不是…...
