vue项目实现图形验证码

本文实例为大家分享了vue项目" title="vue项目">vue项目实现图形验证码的具体代码,供大家参考,具体内容如下

效果预览:(项目要求清爽一点,所以没背景。但是下面的代码会把背景干扰写进去)

1.下载identify插件,命令:npm i identify

2.在你的components目录新建一个vue组件,我的命名是:sIdentify.vue

3.在组件内把下面的代码copy过去(可以自定义哈!)

<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: {

// 生成一个随机数

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 + ")";

},

transparent() {

return "rgb(255,255,255)";

},

drawPic() {

let canvas = document.getElementById("s-canvas");

let ctx = canvas.getContext("2d");

ctx.textBaseline = "bottom";

// 绘制背景

// ctx.fillStyle = this.randomColor(

// this.backgroundColorMin,

// this.backgroundColorMax

// );

ctx.fillStyle = this.transparent();

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(-10, 10);

// 修改坐标原点和旋转角度

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>

4.在你需要验证码的页面引入组件并写好方法:

<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",//随便打的

}

},

methods: {

refreshCode() {//

this.identifyCode = "";

this.makeCode(this.identifyCodes,4);

},

randomNum (min, max) {

max = max + 1

return Math.floor(Math.random() * (max - min) + min)

},

// 随机生成验证码字符串

makeCode (data, len) {

for (let i = 0; i < len; i++) {

this.identifyCode += data[this.randomNum(0, data.length - 1)]

}

}

}

</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 vue项目实现图形验证码 的全部内容, 来源链接: utcz.com/p/239089.html

回到顶部