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

Design theory: the basics of font design

<br />Words are the inevitable product of hu...

JavaScript data structure bidirectional linked list

A singly linked list can only be traversed from t...

Solution to MySQL error code 1862 your password has expired

The blogger hasn't used MySQL for a month or ...

Detailed explanation of the use of umask under Linux

I recently started learning Linux. After reading ...

HTML marquee tag usage examples

This tag is not part of HTML3.2 and only supports ...

Problems and solutions when installing and using VMware

The virtual machine is in use or cannot be connec...

JDBC-idea import mysql to connect java jar package (mac)

Preface 1. This article uses MySQL 8.0 version Co...

How to quickly log in to MySQL database without password under Shell

background When we want to log in to the MySQL da...

js uses Canvas to merge multiple pictures into one implementation code

Solution function mergeImgs(list) { const imgDom ...

Detailed explanation of Vue project optimization and packaging

Table of contents Preface 1. Routing lazy loading...

How to clear the cache after using keep-alive in vue

What is keepalive? In normal development, some co...