Vue 前端验证码

Easter79
• 阅读 827

⭐前言

在vue项目中,登录界面必不可少。简单项目里,验证码通常由数字字母构成。一般有两种产生方式:前端,后端。后端生成,前端直接调用接口,将返回的url放入a标签即可。而前端生成,则大多用canvas画布实现,如何让验证码随屏幕大小变化,还能保持原样不失真,这就是我们要实现的功能。当然,在创建vue项目时,我们必须得克服跨域问题。No ' Access-Control-Allow-Origin'的解决方案,在文章最后。若有错误和建议,请积极指正!

⭐canvas 生成验证码 (vue)

按照需求,一步步实现验证码生成。(源码贴在后面)

Vue 前端验证码

下面,进入正题。

组件需要什么?

首先,我们自己注册一个组件 Identify.vue ,用来实现验证码的生成。

第一步, 我们要明确,这个组件需要什么?

显然,我们需要一个画布,在画布上进行绘制,生成验证码就好。

自然而然, <canvas></canvas> 就布局上去了。

<template> <div > <canvas id="canvas" ></canvas> </div></template>

再者,我们需定义组件属性

props: { identifyCode: { // 默认注册码  type: String,  default: '1234' }, fontSizeMin: { // 字体最小值  type: Number,  default: 130 }, fontSizeMax: { // 字体最大值  type: Number,  default: 140 }}

组件的实现

接下来,我们可以进行绘制验证码。内容包括如下:

1、随机数(验证码内容:一般为数字字母组合)

2、随机颜色 (rgb实现)

3、干扰线

4、干扰点

随机数

randomNum (min, max) { return Math.floor(Math.random() * (max - min) + min)},

随机色

randomColor (min, max) { const r = this.randomNum(min, max) const g = this.randomNum(min, max) const b = this.randomNum(min, max) return 'rgb(' + r + ',' + g + ',' + b + ')'},

干扰线

drawLine (ctx) { const canvas = document.getElementById('canvas') for (let j = 0; j < 4; j++) { ctx.strokeStyle = this.randomColor(100, 200) ctx.beginPath() ctx.moveTo(this.randomNum(0, canvas.width), this.randomNum(0, canvas.height)) ctx.lineTo(this.randomNum(0, canvas.width), this.randomNum(0, canvas.height)) // lineWidth 控制线的粗细 ctx.lineWidth = 3 ctx.stroke() }},

干扰点

drawDot (ctx) { const canvas = document.getElementById('canvas') for (let k = 0; k < 30; k++) {  ctx.fillStyle = this.randomColor(0, 255)  ctx.beginPath()  // 可以改变 3 来实现改变干扰点的大小  ctx.arc(this.randomNum(0, canvas.width), this.randomNum(0, canvas.height), 3, 0, 2 * Math.PI)  ctx.fill() }}

绘制验证码

drawPic () { const canvas = document.getElementById('canvas') const ctx = canvas.getContext('2d') ctx.textBaseline = 'bottom' // console.log(canvas.width) // 绘制背景(颜色) ctx.fillStyle = '#e6ecfd' ctx.fillRect(0, 0, canvas.width, canvas.height) // 绘制文字 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) { const canvas = document.getElementById('canvas') ctx.fillStyle = this.randomColor(50, 160) // 随机生成字体颜色 ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' // 随机生成字体大小 // x,y控制生成字体在画布上分布的位置。如下的0.5/1,可根据实际情况进行增减。 const x = (i + 0.5 ) * (canvas.width / (this.identifyCode.length + 1)) const y = this.randomNum(this.fontSizeMax, canvas.height - 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)},

注意:

const canvas = document.getElementById('canvas')// canvas.width是为了获取到画布的宽度,实现适配。高度亦是如此。

组件源码

原理搞懂,直接上手。新建一个vue文件。

Identify.vue

代码如下:

<template> <div > <canvas id="canvas" ></canvas> </div></template><script>export default { name: 'Identify', props: { identifyCode: { // 默认注册码  type: String,  default: '1234' }, fontSizeMin: { // 字体最小值  type: Number,  default: 130 }, fontSizeMax: { // 字体最大值  type: Number,  default: 140 } }, methods: { // 生成一个随机数 randomNum (min, max) {  return Math.floor(Math.random() * (max - min) + min) }, // 生成一个随机的颜色 randomColor (min, max) {  const r = this.randomNum(min, max)  const g = this.randomNum(min, max)  const b = this.randomNum(min, max)  return 'rgb(' + r + ',' + g + ',' + b + ')' }, drawPic () {  const canvas = document.getElementById('canvas')  const ctx = canvas.getContext('2d')  ctx.textBaseline = 'bottom'  // console.log(canvas.width)  // 绘制背景  ctx.fillStyle = '#e6ecfd'  ctx.fillRect(0, 0, canvas.width, canvas.height)  // 绘制文字  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) {  const canvas = document.getElementById('canvas')  ctx.fillStyle = this.randomColor(50, 160) // 随机生成字体颜色  ctx.font = this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei' // 随机生成字体大小  const x = (i + 0.5 ) * (canvas.width / (this.identifyCode.length + 1))  const y = this.randomNum(this.fontSizeMax, canvas.height - 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) {  // 绘制干扰线  const canvas = document.getElementById('canvas')  for (let j = 0; j < 4; j++) {  ctx.strokeStyle = this.randomColor(100, 200)  ctx.beginPath()  ctx.moveTo(this.randomNum(0, canvas.width), this.rando.........
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
springboot2之优雅处理返回值
前言最近项目组有个老项目要进行前后端分离改造,应前端同学的要求,其后端提供的返回值格式需形如{"status":0,"message":"success","data":{}}方便前端数据处理。要实现前端同学这个需求,其实也挺简单的,
Stella981 Stella981
3年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Easter79 Easter79
3年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k