Vue implements picture verification code when logging in

This article example shares the specific code of the picture verification code for login in Vue for your reference. The specific content is as follows

Rendering

1. Create a new Vue component components/identify/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: 28
    },
    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: 40
    }
  },
  methods: {
    // Generate a random number randomNum (min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // Generate a random color randomColor (min, max) {
      var r = this.randomNum(min, max)
      var g = this.randomNum(min, max)
      var b = this.randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    },
    drawPic() {
      var canvas = document.getElementById('s-canvas')
      var ctx = canvas.getContext('2d')
      ctx.textBaseline = 'bottom'
      // Draw the background ctx.fillStyle = this.randomColor(
        this.backgroundColorMin,
        this.backgroundColorMax
      )
      ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
      // Draw text 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'
      var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
      var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
      var deg = this.randomNum(-30, 30)
      // Modify the coordinate origin and rotation angle ctx.translate(x, y)
      ctx.rotate(deg * Math.PI / 270)
      ctx.fillText(txt, 0, 0)
      // Restore the coordinate origin and rotation angle ctx.rotate(-deg * Math.PI / 270)
      ctx.translate(-x, -y)
    },
    drawLine (ctx) {
      // Draw interference lines for (let i = 0; i < 2; 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) {
      // Draw interference points for (let i = 0; i < 20; 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>
<style lang='less' scoped>
.s-canvas {
    height: 38px;
}
.s-canvas canvas{
    margin-top: 1px;
    margin-left: 8px;
}
</style>

Second, local introduction is needed

<template>
 <span @click="refreshCode" style="cursor: pointer;">
  <s-identify :identifyCode="identifyCode" ></s-identify>
 </span>
</template>

<script>
// Import the image verification code component import SIdentify from '@/components/identify'
export default {
 components: { SIdentify },
 data() {
  return {
   // Image verification code identifyCode: '',
   // Verification code rules identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
  }
 },
 methods: {
  // Switch verification code refreshCode() {
   this.identifyCode = ''
   this.makeCode(this.identifyCodes, 4)
     },
  // Generate a random verification code makeCode(o, l) {
    for (let i = 0; i < l; i++) {
      this.identifyCode += this.identifyCodes[
        Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
      ]
    }
  },
 }
}
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vue custom development sliding picture verification component
How to encapsulate the image slider verification component in Vue
Vue implements image verification code generation
Vue implements picture sliding verification
Implementing 60s countdown function of image verification code based on Vue
VUE implements image verification code function
Vue+elementUI implements form and image upload and verification function example
Detailed explanation of how to use the Vue verification code (identify) plug-in
vue+Element implements random verification code for login
Vue3 realizes rotating picture verification

<<: Basic learning and experience sharing of MySQL transactions

>>: Detailed graphic explanation of setting up routing and virtual machine networking in Linux