Vue project implements graphic verification code

Vue project implements graphic verification code

This article example shares the specific code of the Vue project to implement the graphic verification code for your reference. The specific content is as follows

Effect preview: (The project requires a clean look, so there is no background. But the following code will include background interference)

1. Download the identify plug-in, command: npm i identify

2. Create a new vue component in your components directory. My name is: sIdentify.vue

3. Copy the following code into the component (you can customize it!)

<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: 35
    },
    fontSizeMax: {
      type: Number,
      default: 35
    },
    backgroundColorMin: {
      type: Number,
      default: 180
    },
    backgroundColorMax: {
      type: Number,
      default: 240
    },
    colorMin:
      type: Number,
      default: 50
    },
    colorMax: {
      type: Number,
      default: 160
    },
    lineColorMin: {
      type: Number,
      default: 100
    },
    lineColorMax: {
      type: Number,
      default: 200
    },
    dotColorMin: {
      type: Number,
      default: 0
    },
    dotColorMax: {
      type: Number,
      default: 255
    },
    contentWidth: {
      type: Number,
      default: 120
    },
    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) {
      let r = this.randomNum(min, max);
      let g = this.randomNum(min, max);
      let b = this.randomNum(min, max);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    transparent() {
      return "rgb(255,255,255)";
    },
    drawPic() {
      let canvas = document.getElementById("s-canvas");
      let ctx = canvas.getContext("2d");
      ctx.textBaseline = "bottom";
      // Draw the background // ctx.fillStyle = this.randomColor(
      // this.backgroundColorMin,
      // this.backgroundColorMax
      // );
      ctx.fillStyle = this.transparent();
      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";
      let x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1));
      let y = this.randomNum(this.fontSizeMax, this.contentHeight - 5);
      var deg = this.randomNum(-10, 10);
      // Modify the coordinate origin and rotation angle ctx.translate(x, y);
      ctx.rotate((deg * Math.PI) / 180);
      ctx.fillText(txt, 0, 0);
      // Restore the coordinate origin and rotation angle ctx.rotate((-deg * Math.PI) / 180);
      ctx.translate(-x, -y);
    },
    drawLine(ctx) {
      // Draw interference lines 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) {
      // Draw interference points 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>

4.Introduce the component on the page where you need the verification code and write the method:

<template>
<div class="get-code" @click="refreshCode()">
    <s-identify :identifyCode="identifyCode"></s-identify>
</div>
</template>
<script>
    import SIdentify from "@/components/sIdentify.vue";
    export default {
        components: { SIdentify },
        data() {
           return {
                identifyCode: "",
                identifyCodes: "0123456789abcdwerwshdjeJKDHRJHKOOPLMKQ", // just type it in}
        },
        methods: {            
           refreshCode() {//
             this.identifyCode = "";
             this.makeCode(this.identifyCodes,4);
           },
           randomNum (min, max) {
             max = max + 1
             return Math.floor(Math.random() * (max - min) + min)
           },
           // Randomly generate verification code string makeCode (data, len) {
             for (let i = 0; i < len; i++) {
             this.identifyCode += data[this.randomNum(0, data.length - 1)]
           }
        }
    }
</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:
  • Simple implementation of the 60-second countdown function of the vue verification code
  • vue implements the registration function of sending SMS verification code through mobile phone
  • Vue generates a random verification code sample code
  • Vue+element-ui integrates random verification code + username + password form verification function
  • VUE implements image verification code function
  • How to add mobile verification code component function in Vue
  • Vue implements verification code input box component
  • Vue implements sliding puzzle verification code function
  • Vue implements picture verification code when logging in
  • Vue implements graphic verification code

<<:  Sql query MySql database table name and description table field (column) information

>>:  Detailed explanation of sshd service and service management commands under Linux

Recommend

CSS3 realizes the website product display effect diagram

This article introduces the effect of website pro...

JavaScript canvas to achieve code rain effect

This article shares the specific code for canvas ...

MySQL high availability cluster deployment and failover implementation

Table of contents 1. MHA 1. Concept 2. Compositio...

Teach you to quickly build a web cluster project based on nginx

Table of contents 1. Project Environment 2. Proje...

How to set static IP in centOS7 NET mode

Preface NAT forwarding: Simply put, NAT is the us...

MySQL example of getting today and yesterday's 0:00 timestamp

As shown below: Yesterday: UNIX_TIMESTAMP(CAST(SY...

Use Nginx to build a streaming media server to realize live broadcast function

Written in front In recent years, the live stream...

How to modify the time in centos virtual machine

The one above shows the system time, and the one ...

A comprehensive summary of frequently used statements in MySQL (must read)

The knowledge points summarized below are all fre...

About WeChat Mini Program to implement cloud payment

Table of contents 1. Introduction 2. Thought Anal...

Vue.js $refs usage case explanation

Despite props and events, sometimes you still nee...

Method of building docker private warehouse based on Harbor

Table of contents 1. Introduction to Harbor 1. Ha...

Detailed example of removing duplicate data in MySQL

Detailed example of removing duplicate data in My...