vue2动态生成（绘制）图形验证码（验证码图片）

 

方案1：js绘制条形验证码

 

参考文档：https://blog.csdn.net/LOVE_mingjing/article/details/130622848

 

utils文件夹下新建GVerify.js文件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
function GVerify(options) {
  // 创建一个图形验证码对象，接收options对象为参数
  this.options = {
    // 默认options参数值
    id: "", // 容器Id
    canvasId: "verifyCanvas", // canvas的ID
    width: "80", // 默认canvas宽度
    height: "30", // 默认canvas高度
    type: "blend", // 图形验证码默认类型 blend:数字字母混合类型、number:纯数字、letter:纯字母
    code: "",
  };
 
  if (Object.prototype.toString.call(options) === "[object Object]") {
    // 判断传入参数类型
    for (var i in options) {
      // 根据传入的参数，修改默认参数值
      this.options[i] = options[i];
    }
  } else {
    this.options.id = options;
  }
 
  this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
  this.options.letterArr = getAllLetter();
 
  this._init();
  this.refresh();
}
 
GVerify.prototype = {
  /** 版本号**/
  version: "1.0.0",
 
  /** 初始化方法**/
  _init: function () {
    var con = document.getElementById(this.options.id);
    var canvas = document.createElement("canvas");
    this.options.width = "140";
    this.options.height = "56";
    canvas.id = this.options.canvasId;
    canvas.width = this.options.width;
    canvas.height = this.options.height;
    canvas.style.cursor = "pointer";
    canvas.innerHTML = "浏览器不支持canvas";
    con.appendChild(canvas);
    var parent = this;
    canvas.onclick = function () {
      parent.refresh();
    };
  },
 
  /** 生成验证码**/
  refresh: function () {
    var canvas = document.getElementById(this.options.canvasId);
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
    }
    ctx.textBaseline = "middle";
 
    ctx.fillStyle = randomColor(180, 240);
    ctx.fillRect(0, 0, this.options.width, this.options.height);
 
    if (this.options.type === "blend") {
      // 判断验证码类型
      var txtArr = this.options.numArr.concat(this.options.letterArr);
    } else if (this.options.type === "number") {
      var txtArr = this.options.numArr;
    } else {
      var txtArr = this.options.letterArr;
    }
 
    for (var i = 1; i <= 4; i++) {
      var txt = txtArr[randomNum(0, txtArr.length)];
      this.options.code += txt;
      ctx.font =
        randomNum(this.options.height / 2, this.options.height) + "px SimHei"; // 随机生成字体大小
      ctx.fillStyle = randomColor(50, 160); // 随机生成字体颜色
      ctx.shadowOffsetX = randomNum(-3, 3);
      ctx.shadowOffsetY = randomNum(-3, 3);
      ctx.shadowBlur = randomNum(-3, 3);
      ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
      var x = (this.options.width / 5) * i;
      var y = this.options.height / 2;
      var deg = randomNum(-30, 30);
      /** 设置旋转角度和坐标原点**/
      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);
    }
    /** 绘制干扰线**/
    for (var i = 0; i < 4; i++) {
      ctx.strokeStyle = randomColor(40, 180);
      ctx.beginPath();
      ctx.moveTo(
        randomNum(0, this.options.width),
        randomNum(0, this.options.height)
      );
      ctx.lineTo(
        randomNum(0, this.options.width),
        randomNum(0, this.options.height)
      );
      ctx.stroke();
    }
    /** 绘制干扰点**/
    for (var i = 0; i < this.options.width / 4; i++) {
      ctx.fillStyle = randomColor(0, 255);
      ctx.beginPath();
      ctx.arc(
        randomNum(0, this.options.width),
        randomNum(0, this.options.height),
        1,
        0,
        2 * Math.PI
      );
      ctx.fill();
    }
  },
 
  /** 验证验证码**/
  validate: function (code) {
    var code = code.toLowerCase();
    var v_code = this.options.code.toLowerCase();
    if (code == v_code) {
      return true;
    } else {
      return false;
    }
  },
};
/** 生成字母数组**/
function getAllLetter() {
  var letterStr =
    "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
  return letterStr.split(",");
}
/** 生成一个随机数**/
function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min) + min);
}
/** 生成一个随机色**/
function randomColor(min, max) {
  var r = randomNum(min, max);
  var g = randomNum(min, max);
  var b = randomNum(min, max);
  return "rgb(" + r + "," + g + "," + b + ")";
}
 
export { GVerify };

　　

可以手动修改内容类型、长度等等，支持手动刷新

 

使用方式：

1.组件中自行配置样式：

?
1
2
3
4
5
6
7
8
9
10
<div :class="$style.verifyBox" v-show="verifyVisible">
            <input
              type="text"
              maxlength="4"
              :class="[$style.verifyInput]"
              v-model="userCode"
            />
            <div id="v_container" @click="btncode"></div>
            <button @click="xxxxVerifyCode">提交</button>
          </div>

　　

2.引入文件：

?
1
2
3
4
5
6
7
8
9
10
import { GVerify } from "@/utils/GVerify.js";
 
 
  data() {
    return {
      verifyCode: "",
      imgData: "", // 验证码
      userCode: "", // 用户填写的动态验证码
    };
  },

　　

3.methods中配置刷新与校验的方法：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// 获取动态验证码
    btncode() {
      this.imgData = this.verifyCode.options.code.substr(
        this.verifyCode.options.code.length - 4
      );
    },
    // 校验动态验证码
    xxxxVerifyCode() {
      var userCode = this.userCode.toLowerCase();
      var v_code = this.verifyCode.options.code.substr(this.verifyCode.options.code.length - 4).toLowerCase();      if(userCode === v_code){
        alert('duile')
      }
    },

　　

4.mounted或逻辑中调用：

?
1
2
3
this.verifyCode = new GVerify("v_container");
          this.imgData = this.verifyCode.options.code.substr(this.verifyCode.options.code.length - 4)<em id="__mceDel">;</em><em id="__mceDel">          this.verifyVisible = true;
</em>

　　

效果：

 

 

方案2：使用插件vue2-verify

 

参考文档（随便找的，网上很多大佬分享）：https://blog.csdn.net/q2724338648/article/details/134488798

 

此插件提供了5种验证码样式，有最常见的图形验证码，还有滑动验证码、拼图验证码、计算验证码、填块验证码，样式可以自行覆盖，封装较完善

效果：

 

使用方法：

【这里用了普通条形验证码，其余4种文档中有列出参数】

 

1.npm引入插件：

npm i vue2-verify

 

2.组件中调用：

?
1
2
3
4
5
6
<verify
                @success="onVerifySuccess"
                @error="onVerifyError"
                :type="1"
                :codeLength="4"
              ></verify>

　　

3.文件中引入：

?
1
2
3
4
5
import Verify from "vue2-verify";  data() {
    return {
      verifyVisible: false,
    };
  },components: { Verify, },

　　

4.methoed中配置校验方法即可：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
onVerifySuccess(obj) {
  //验证码正确回调
  setTimeout(() => {
    this.verifyVisible = false;
    this.onClick(this.verifyCode);
  }, 300);
},
onVerifyError(obj) {
  //验证码错误回调
  console.log("verify error");
  //错误刷新验证码
  obj.refresh();
},

　　

p.s.不过滑块验证体验稍微有些不好，遂放弃使用

 

posted @   芝麻小仙女  阅读(1019)  评论(0)  编辑  收藏  举报
相关博文：
· vue+html2canvas生成寄几想要的海报
· 【vue2】实现长按图片保存功能
· vue2 验证码
· Vue验证码模块
· verifyCode.js
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2023-09-12 从零开始使用vue2+element搭建后台管理系统（框架布局+面包屑+内容页加载实现）
点击右上角即可分享
微信分享提示
AI IDE Trae