验证码功能是实现登录功能中比较常见的一个问题
验证码的整体思路是：
1.前端登录页面发起获取验证码图片请求.
2.服务端收到请求后,生成一个唯一id,对应的验证码图片 以及验证码图片对应的值(这个值使用缓存保存,id-值一一对应,缓存可使用redis或本地缓存,本地缓存适用于单节点服务)、然后把id
和图片返回前端.
3.前端收到id后保存到登录表单, 收到的图片直接展示到 登录页面
4.用户输入用户信息和 对应图片的验证码 和之前拿到的id发起登录请求
5.后端收到请求后,使用id获取缓存中真实的验证码值,然后和用户提交的验证码进行比较,如果相等则认为通过 反之不通过
后端可以采用开源工具类来生成验证码
在上面的整体逻辑中前端做的工作是比较少的，那么
如果想要实现纯前端实现验证码功能应该怎么写哪？？
整体思路：
- 使用canvas绘制验证码
- 绘制的方法
-- 使用canvas的getContext方法获取到canvas标签及里面的内容
-- 使用canvas的fillStyle，fillRect， textBaseline， rotate，beginPath，arc,fill等方法进行绘制，对绘制的成功的文字进行平移，旋转，添加线条及点等方法实现干扰防止OCR
3.在进入页面的时候调用onMounted实现验证的渲染
4.给canvas添加点击事件实现当我点击图片的时候验证码的刷新操作
什么是OCR: 电子设备（例如扫描仪或数码相机）检查纸上打印的字符，通过检测暗、亮的模式确定其形状，然后用字符识别方法将形状翻译成计算机文字的过程
代码
javascript
<template>
<div>
<canvas ref="verify" @click="handleDraw" :width="state.width" :height="state.height"></canvas>
</div>
</template>
<script setup >
import { reactive, onMounted } from 'vue'
import { ref } from 'vue'
const verify = ref(null)
const state = reactive({
pool: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890',
// 声明两个变量存验证码的宽高
width: 150,
height: 45,
// 验证码最终存储的位置
imgCode: ''
})
// 初始化绘制图像验证码
onMounted(() => {
state.imgCode = draw()
})
// 点击之后重新绘制图形验证码
const handleDraw = () => {
state.imgCode = draw()
}
//生成随机数
const randomNum = (min, max) => {
// parseInt(string, radix) 解析一个字符串并返回指定基数的十进制整数，radix 是 2-36 之间的整数，表示被解析字符串的基数
return parseInt(Math.random() * (max - min) + min, 10)
}
// 随机生成颜色
const randomColor = (min, max) => {
const r = randomNum(min, max)
const g = randomNum(min, max)
const b = randomNum(min, max)
return `rgb(${r},${g},${b})`
}
// 实现验证码的绘制
const draw = () => {
// ① 获取canvas属性
const ctx = verify.value.getContext("2d")
// ② 填充背景颜色
ctx.fillStyle = randomColor(20, 256)
ctx.fillRect(0, 0, state.width, state.height) // ctx.fillRect(矩形起始点的x坐标，矩形起始点的y坐标,矩形的宽度，矩形的高度) fillRect()方法绘制一个填充了内容的矩形
// fillText() 指定的坐标上绘制文本字符串，并使用当前的 fillStyle 对其进行填充
// ③ 生成随机数，随机数旋转
for (let i = 0; i < 4; i++) {
const text = state.pool[randomNum(0, state.pool.length)]
state.imgCode += text
console.log('state.imgCode', state.imgCode)
const fontSize = randomNum(16, 30)
ctx.font = fontSize + "px Simhei"
ctx.fillStyle = randomColor(0, 150) // 设置文字颜色
ctx.textBaseline = "top" // 述绘制文本时，当前文本基线的属性
const deg = randomNum(-15, 15) // 旋转的角度
ctx.save() // 保存当前的绘图状态
ctx.translate((30 * i + 15), randomNum(10, 25)) // ctx.translate(x, y); x 点的水平方向、原始的 y 点垂直方向进行平移变换
ctx.rotate((deg * Math.PI) / 180) // Math.PI 3.14 【随机生成旋转角度】
ctx.fillText(text, 0, 0)
ctx.restore() // ctx.restore() 方法后，会将绘图上下文恢复到最近一次保存的状态，也就是撤销之前的所有变换和样式设置，使得后续的绘制不受影响
// 使用 save() 方法保存默认的状态，使用 restore() 进行恢复
}
// ④ 生成40个点和4条线形成干扰防止OCR
for (let i = 0; i < 5; i++) {
ctx.beginPath()
ctx.strokeStyle = randomColor(30, 256)
ctx.moveTo(randomNum(0, state.width), randomNum(0, state.height))
ctx.lineTo(randomNum(0, state.width), randomNum(0, state.height))
ctx.fillStyle = randomColor(0, 150)
ctx.stroke() // 绘制线段
}
for (let x = 0; x < 40; x++) {
ctx.beginPath()
// ctx.arc( ①圆弧中心（圆心）的 x 轴坐标 ②圆弧中心（圆心）的 y 轴坐标 ③圆弧的半径 圆弧的起始点 ④x 轴方向开始计算，单位以弧度表示 ⑤圆弧的终点，单位以弧度表示)
ctx.arc(randomNum(0, state.width), randomNum(0, state.height), 1, 0, 2 * Math.PI)
ctx.closePath()
// 笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作
ctx.stroke()
ctx.fillStyle = randomColor(150, 200)
ctx.fill()
}
return state.imgCode
}
</script>总结
前后端交互实现验证码功能：
即：
1） 进入页面的时候就会向后端发一个请求，请求包含
请求包含两个值
①图片
②存入缓存的key的值 key为uuid：value为验证码的答案）
【图片的字节码的编码----->后端画一个验证码的图传递给前端前端解析成图片】 （进入页面时，后端传验证码图片过来）
2）点击登录的时候会向后端传四个参数【用户名，密码，code(验证码答案)，uuid （redis存的值（key值为uuid，value为验证码答案）】
取出uuid和code进行比较，一样的话就说明是你填的验证码对的，允许登录
纯前端实现验证码
基于canvas 实现绘制
参考
https://blog.csdn.net/MarkZQP/article/details/108222688
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API