基于canvas纯前端实现验证码的绘制

验证码功能是实现登录功能中比较常见的一个问题

验证码的整体思路是:

1.前端登录页面发起获取验证码图片请求.
2.服务端收到请求后,生成一个唯一id,对应的验证码图片 以及验证码图片对应的值(这个值使用缓存保存,id-值一一对应,缓存可使用redis或本地缓存,本地缓存适用于单节点服务)、然后把id
和图片返回前端.

3.前端收到id后保存到登录表单, 收到的图片直接展示到 登录页面

4.用户输入用户信息和 对应图片的验证码 和之前拿到的id发起登录请求

5.后端收到请求后,使用id获取缓存中真实的验证码值,然后和用户提交的验证码进行比较,如果相等则认为通过 反之不通过

后端可以采用开源工具类来生成验证码

在上面的整体逻辑中前端做的工作是比较少的,那么
如果想要实现纯前端实现验证码功能应该怎么写哪??
整体思路:

  1. 使用canvas绘制验证码
  2. 绘制的方法
    – 使用canvas的getContext方法获取到canvas标签及里面的内容
    – 使用canvas的fillStyle,fillRect, textBaseline, rotate,beginPath,arc,fill等方法进行绘制,对绘制的成功的文字进行平移,旋转,添加线条及点等方法实现干扰防止OCR

3.在进入页面的时候调用onMounted实现验证的渲染
4.给canvas添加点击事件实现当我点击图片的时候验证码的刷新操作

什么是OCR: 电子设备(例如扫描仪或数码相机)检查纸上打印的字符,通过检测暗、亮的模式确定其形状,然后用字符识别方法将形状翻译成计算机文字的过程

代码

<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
https://blog.csdn.net/RequesToGod/article/details/121666622
https://www.cnblogs.com/loveCrane/p/17222671.html

  • 23
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Canvas前端图片编辑器是一种可以在Web浏览器中使用的工具,它利用了HTML5的Canvas元素来实现图片的编辑和处理功能。 基于Canvas前端图片编辑器具有以下特点和功能: 1. 绘制和编辑:可以在Canvas上进行绘制和编辑图片的各种元素,如线条、矩形、圆形、文本等。用户可以通过控制绘制参数,如颜色、粗细和透明度来实现自定义的编辑效果。 2. 滤镜和特效:该编辑器还提供了各种滤镜和特效功能,如黑白、模糊、锐化、亮度调节等。用户可以通过选择不同的滤镜效果来调整图片的颜色和外观。 3. 裁剪和缩放:用户可以使用该编辑器来裁剪和缩放图片,以适应不同的尺寸和比例的需求。裁剪功能允许用户选择需要保留的区域,并将其剪切为新的图片。 4. 图层管理:该编辑器支持图层概念,用户可以根据需要添加、删除和调整图片的各个图层,从而实现复杂的图像组合和叠加效果。 5. 撤销和重做:编辑器还提供了撤销和重做功能,以方便用户进行实时编辑和调整。用户可以随时回退到之前的编辑状态,并重新进行修改。 基于Canvas前端图片编辑器为用户提供了一个友好的界面和简便的操作方式,使得图片编辑和处理变得更加便捷和高效。无需安装任何额外的软件或插件,用户即可在Web浏览器中随时随地进行图片编辑,满足各种个性化和专业化的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值