vue系列---identify(生成图片验证码)插件

介绍一个Vue的图形验证码插件,使用canvas生成,可自定义参数如颜色、大小等,适用于前端开发项目。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

identify

这是一个vue的插件,使用canvas来生成图形验证码。
具体参数如下:
在这里插入图片描述
直接上测试代码:
identify.vue组件(主要用于定义参数和方法)

<template>
  <div class="s-canvas">
    <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
  </div>
</template>
<script>
  export default{
    name: 'SIdentify',
    props: {
      identifyCode: {
        type: String,
        default: '1234'
      },
      fontSizeMin: {
        type: Number,
        default: 16
      },
      fontSizeMax: {
        type: Number,
        default: 40
      },
      backgroundColorMin: {
        type: Number,
        default: 180
      },
      backgroundColorMax: {
        type: Number,
        default: 240
      },
      colorMin: {
        type: Number,
        default: 50
      },
      colorMax: {
        type: Number,
        default: 160
      },
      lineColorMin: {
        type: Number,
        default: 40
      },
      lineColorMax: {
        type: Number,
        default: 180
      },
      dotColorMin: {
        type: Number,
        default: 0
      },
      dotColorMax: {
        type: Number,
        default: 255
      },
      contentWidth: {
        type: Number,
        default: 112
      },
      contentHeight: {
        type: Number,
        default: 38
      }
    },
    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(this.colorMin, this.colorMax)
        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(-45, 45)
        // 修改坐标原点和旋转角度
        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 < 8; i++) {
          ctx.strokeStyle = this.randomColor(this.lineColorMin, this.lineColorMax)
          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 < 100; 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()
        }
      }
    },
    watch: {
      identifyCode () {
        this.drawPic()
      }
    },
    mounted () {
      this.drawPic()
    }
  }
</script>

在 main.js进行引入(注意路径的地址):

import SIdentify from './components/page/identify'
Vue.use(SIdentify)

codetest.vue(在页面进行使用):

<template>
    <div class="code" @click="refreshCode">
    <s-identify :identifyCode="identifyCode"></s-identify>
  </div>
</template>

<script>
export default {
  name: "codetest",
  data() {
    return {
      identifyCodes: "1234567890",
      identifyCode: ""
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    }
  }
};
</script>

<style>
.code {
  margin: 400px auto;
  width: 114px;
  height: 40px;
  border: 1px solid red;
}
</style>

注意图片验证码的宽高是由参数 contentWidth 和 contentHeight 决定的,所以更改宽高的时候,直接在声明的参数中进行更改就可。

测试效果:
在这里插入图片描述

Vue图形验证码登录通常涉及到前端生成验证码和后端验证的过程。使用identify插件生成图片验证码并在login页面获取验证码的步骤大致如下: 1. 安装并引入identify插件: 首先需要在Vue项目中安装identify插件,可以通过npm或yarn进行安装。 2. 在login组件生成验证码: 在login页面的Vue组件中,使用identify插件提供的方法生成验证码,并展示在页面上。通常会在一个`<canvas>`元素中渲染验证码图片。 3. 获取验证码内容: 在用户输入验证码后,可以通过identify插件提供的方法获取到输入的验证码内容。通常情况下,这是在用户点击提交表单时进行的操作。 4. 提交表单数据: 用户填写完登录信息后,将验证码信息和其它登录信息(如用户名、密码等)一起发送到后端服务器进行验证。 5. 后端验证: 后端服务器需要接收前端提交的验证码信息,并与服务器存储的验证码进行比对,确认验证码的正确性。只有验证码正确,才会继续处理登录逻辑。 6. 前端处理反馈: 根据后端的验证结果,前端需要做出相应的处理,比如显示登录成功或错误提示信息。 实现示例代码(假设已安装identify插件): ```html <template> <div> <canvas ref="captchaCanvas" @click="refreshCaptcha"></canvas> <input type="text" v-model="inputCaptcha" /> <button @click="submitForm">登录</button> </div> </template> <script> import identify from 'identify'; export default { data() { return { inputCaptcha: '', // 用户输入的验证码 }; }, methods: { // 刷新验证码 refreshCaptcha() { const canvas = this.$refs.captchaCanvas; const context = canvas.getContext('2d'); identify.gen验证码内容(function (error, code) { if (error) throw error; // 将验证码绘制到canvas上 context.drawImage(code.data, 0, 0, canvas.width, canvas.height); // 可以将生成验证码保存起来,用于后续验证 // ... }); }, // 提交表单 submitForm() { const realCaptcha = identify.getCaptcha(this.$refs.captchaCanvas); // 获取用户输入的验证码 // 这里可以将inputCaptcha和realCaptcha一起发送到后端进行验证 // ... } }, mounted() { // 组件加载后生成初始验证码 this.refreshCaptcha(); } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值