vue图形验证码

Vue图形验证码

组件

可以自行封装一下,放在components目录下。

<template><span class="s-canvas" @click="changeCode"><canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas></span>
</template><script>
export default {name: "Code",data() {return {identifyCode: ""}},props: {identifyCodes: {//验证码从该字段中抽取生成type: String,default: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ"},fontSizeMin: {// 字体最小值type: Number,default: 25},fontSizeMax: {// 字体最大值type: Number,default: 35},backgroundColorMin: {// 验证码图片背景色最小值type: Number,default: 200},backgroundColorMax: {// 验证码图片背景色最大值type: Number,default: 220},dotColorMin: {// 背景干扰点最小值type: Number,default: 60},dotColorMax: {// 背景干扰点最大值type: Number,default: 120},contentWidth: {//容器宽度type: Number,default: 100},contentHeight: {//容器高度type: Number,default: 44}},watch: {identifyCode() {this.drawPic();}},mounted() {this.drawPic();this.makeCode(this.identifyCodes, 4);},methods: {// 生成一个随机数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 + ")";},drawPic() {let canvas = document.getElementById("s-canvas");let ctx = canvas.getContext("2d");ctx.textBaseline = "bottom";// 绘制背景ctx.fillStyle = this.randomColor(this.backgroundColorMin,this.backgroundColorMax);ctx.fillRect(0, 0, this.contentWidth, this.contentHeight);// 绘制文字for (let i = 0; i < this.identifyCode.length; i++) {this.drawText(ctx, this.identifyCode[i], i);}this.drawLine(ctx);this.drawDot(ctx);},drawText(ctx, txt, i) {ctx.fillStyle = this.randomColor(50, 160); //随机生成字体颜色ctx.font =this.randomNum(this.fontSizeMin, this.fontSizeMax) + "px SimHei"; //随机生成字体大小let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);var deg = this.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);},drawLine(ctx) {// 绘制干扰线for (let i = 0; i < 4; i++) {ctx.strokeStyle = this.randomColor(100, 200);ctx.beginPath();ctx.moveTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight));ctx.lineTo(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight));ctx.stroke();}},drawDot(ctx) {// 绘制干扰点for (let i = 0; i < 30; i++) {ctx.fillStyle = this.randomColor(0, 255);ctx.beginPath();ctx.arc(this.randomNum(0, this.contentWidth),this.randomNum(0, this.contentHeight),1,0,2 * Math.PI);ctx.fill();}},/*切换验证码start*/changeCode() {this.identifyCode = "";this.makeCode(this.identifyCodes, 4);},makeCode(e, n) {for (let i = 0; i < n; i++) {this.identifyCode += e[this.randomNum(0, e.length)];}this.$emit("update:changeCode", this.identifyCode);},randomNum(min, max) {return Math.floor(Math.random() * (max - min) + min);}/*切换验证码end*/}
};
</script>
view页面使用

ps:在跟用户输入上的验证码,进行对比的时候可以统一把验证码的英文字母统一转换一下,要么全是大写,要么全是小写。

<template><div><VerificationCode :changeCode.sync='identifyCode'></VerificationCode></div>
</template><script>
import VerificationCode from '@/components/common/VerificationCode '; 
export default {components: {VerificationCode },data() {return {identifyCode:'',    //当前生成的验证码}}
}
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/253880.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

图形验证码安全

目录 图形验证码 图形验证码的作用和原理 图形验证码的分类 图形验证码的验证过程 图形验证码的安全问题 静态图形验证码的破解 利用Python脚本破解静态图形验证码 图形验证码 我们经常在登录app或者网页的时候&#xff0c;都会需要我们输入图形验证码上的内容&#xf…

图形验证码

一、图形验证码是什么&#xff1f; 图形验证码是一些没有规则的图文的组合&#xff0c;参考下图 二、图形验证码有什么用&#xff1f; 防止恶意攻击者采用恶意工具批量注册账号或是大量频繁调用某些请求&#xff0c;给服务器造成压力&#xff0c;占用大量的系统资源。 三、图形…

C语言——数据在内存中的存储(上)

数据在内存中的存储 1. 数据类型的介绍 之前已经介绍过C语言中的基本数据类型了&#xff0c;主要有&#xff1a; char //字符数据类型short //短整型int //整形long //长整型long long //更长的整形float //单精度浮点数double //双精度浮点数 注意&#xff1a;C语言中是是没…

php图形 验证码代码,PHP制作图形验证码代码分享,php图形验证码代码_PHP教程

PHP制作图形验证码代码分享,php图形验证码代码 效果: myvcode.class.php:封装创建验证码的类 /* * file:myvcode.class.php * 验证码类,类名Vcode */ class Vcode {private $width; /*验证码宽度*/ private $height; /*验证码高度*/ private $codeNum; /*验证码字符个数*/ p…

Android图形验证码

1. 前言 图形验证码可以让服务器以图片的形式传给客户端&#xff0c;也可以让客户端自己实现。那客户端要怎么做呢&#xff1f;其实很简单&#xff0c;可以使用Android的Canvas、Paint和Random来实现。用Random来随机生成数字、字母、颜色、画笔原点等等&#xff0c;设置Paint…

java生成图形验证码

随时随地阅读更多技术实战干货&#xff0c;获取项目源码、学习资料&#xff0c;请关注源代码社区公众号(ydmsq666) 首先&#xff0c;需要生成验证码字符串&#xff0c;方式很多&#xff0c;下面提供一种&#xff0c;根据指定源的方式来生成验证码 /*** 使用系统默认字符源生成验…

图形验证码最佳攻略2

下面是注册 如果是手机用户注册,需要发送短信验证码 说明: 发送图形验证码是为了拦截发送短信的.但是不拦截"注册帐号" 但是,用户体验很别扭,因为图形验证码很显然是错误的,但是却可以注册成功. 如果点击注册帐号 ,也要校验图形验证码,那就让用户输入两次图形验证码,…

小程序图形验证码输入校验例子

前言 本教程是基于 “apifm-wxapi” 模块&#xff0c;教你快速实现小程序开发&#xff0c;所以你可能需要先了解以下知识点&#xff1a; 《创建 HelloWorld 项目》《使用 “apifm-wxapi” 快速开发小程序》《免费注册开通后台&#xff0c;获得专属域名》 功能说明 图形验证码的…

Part1:使用 TensorFlow 和 Keras 的 NeRF计算机图形学和深度学习——计算机图形学世界中相机的工作原理

Part1&#xff1a;使用 TensorFlow 和 Keras 的 NeRF计算机图形学和深度学习 1. 效果图2. 原理2.0 前向成像模型2.1 世界坐标系2.2 相机坐标系2.3 坐标变换2.4 投影转换2.5 数据 3. 源码参考 是否有一种方法可以仅从一个场景多张不同视角的照片中捕获整个3D场景&#xff1f; 有…

IDEA+Mysql+Sqlserver安装步骤_kaic

下载Intellij 开发工具&#xff0c;如果有请检查软件是否过期&#xff0c;如果过期卸载电脑上的Intellij软件。卸载步骤&#xff1a; 打开控制面板&#xff0c;选择卸载程序找到Intellij右键卸载 如果没有请保存文档中的Intellij.zip压缩包,进行安装&#xff0c;安装步骤 双…

电脑重置网络

1、键盘WinR键&#xff0c;弹出窗口 2、然后在里面输入cmd输入CMD 3、出现的命令提示框内输入“netsh winsock reset"按”Enter“键 4、重启电脑后生效。

重置电脑

步骤1&#xff1a; 以Win10系统为例 直接在搜索框输入:reset 或者直接选择「设置」-「更新和安全」-「恢复」 步骤2&#xff1a; 步骤3&#xff1a; 根据个人情况选择【保留我的文件】或者【删除所有内容】

如何让Win10 重置此电脑功能无法使用

环境&#xff1a; Win10 专业版 问题描述&#xff1a; 通过设置-更新和安全-恢复-重置此电脑&#xff0c;如何让Win10 重置此电脑功能无法使用 解决方案&#xff1a; 1.PE下删除Win Re 恢复分区&#xff0c;然后重置就无法使用

重置计算机后无法开机,win10重置此电脑失败怎么办_win10重置此电脑失败无法开机修复方法...

当win10系统使用时间长了&#xff0c;难免会有一些电脑故障的出现&#xff0c;这时有些用户就会选择使用重置电脑的方式来解决&#xff0c;但是最近有用户再给自己的win10系统进行重置时总是出现失败的情况&#xff0c;那么win10重置此电脑失败怎么办呢&#xff1f;下面就来告诉…

win10怎么重置计算机,如何重置Win10系统电脑

当系统出现一些难以解决的问题时&#xff0c;我们一般会选择重置电脑来解决问题&#xff0c;比起重装电脑来说简单很多&#xff0c;但是也要注意有可能会失败。下面小编就以win10为例&#xff0c;给大家讲讲怎么重置电脑的操作步骤吧。 操作步骤&#xff1a; 1、打开屏幕侧方的…

DELL 笔记本 - Windows 10 恢复 / 重置此电脑

DELL 笔记本 - Windows 10 恢复 / 重置此电脑 1. Windows 设置 2. 更新和安全 3. 恢复 4. 删除所有内容 5. 所有驱动器 6. 仅删除我的文件 7. 重置 References https://yongqiang.blog.csdn.net/

win10系统如何重置电脑

在win10系统出现系统问题无法修复的时候&#xff0c;我们可以尝试使用win10系统自带的重置功能&#xff0c;相比重装系统在操作上可能要简单不少&#xff0c;不过同样也有失败的风险。下面就让小编带领大家进行一下win10系统重置电脑的操作吧。 win10系统如何重置电脑 1、打…

win10怎样重置电脑

win10怎样重置电脑 windows10提供重置电脑的功能&#xff0c;如果系统遇到问题&#xff0c;运行不正常&#xff0c;或者想刷新系统&#xff0c;可以考虑重置电脑&#xff0c;使电脑有一个全新的干净的系统。下面介绍重置的方法 点击开始菜单&#xff0c;然后选择“设置” 在设…

【教程】Win10重置电脑和重装系统

如果电脑系统出现蓝屏或者卡顿的故障&#xff0c;很多用户会想要通过重装系统来解决。 其实在Windows10系统中会有“重置此电脑”的功能&#xff0c;类似于恢复出厂设置的意思。很多时候只需要重置电脑就足够解决用户的需求了&#xff0c;duck不必繁琐的制作启动U盘来重装系统…

计算机系统如何重置,如何重置电脑系统?看这里1分钟教会你!

原标题&#xff1a;如何重置电脑系统&#xff1f;看这里1分钟教会你&#xff01; 哈喽&#xff0c;大家好我是小黑~最近后台有小伙伴留言咨询#如何重置Windows 10系统&#xff1f;#。 重置系统是Windows系统自带的功能&#xff0c;此功能会将错误的系统文件替换&#xff0c;从而…