vue3+elementplus前端生成图片验证码

1、安装

使用npm i identify --save 或者 yarn add identify --save

2、新建vue组件components/identify/identify.vue

1. <template>
2. <div class="s-canvas">
3. <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas>
4. </div>
5. </template>
6. <script>
7. export default {
8. name: 'SIdentify',
9. props: {
10. identifyCode: {
11. type: String,
12. default: '1234'
13. },
14. fontSizeMin: {
15. type: Number,
16. default: 28
17. },
18. fontSizeMax: {
19. type: Number,
20. default: 40
21. },
22. backgroundColorMin: {
23. type: Number,
24. default: 180
25. },
26. backgroundColorMax: {
27. type: Number,
28. default: 240
29. },
30. colorMin: {
31. type: Number,
32. default: 50
33. },
34. colorMax: {
35. type: Number,
36. default: 160
37. },
38. lineColorMin: {
39. type: Number,
40. default: 40
41. },
42. lineColorMax: {
43. type: Number,
44. default: 180
45. },
46. dotColorMin: {
47. type: Number,
48. default: 0
49. },
50. dotColorMax: {
51. type: Number,
52. default: 255
53. },
54. contentWidth: {
55. type: Number,
56. default: 112
57. },
58. contentHeight: {
59. type: Number,
60. default: 40
61. }
62. },
63. methods: {
64. // 生成一个随机数
65. randomNum (min, max) {
66. return Math.floor(Math.random() * (max - min) + min)
67. },
68. // 生成一个随机的颜色
69. randomColor (min, max) {
70. var r = this.randomNum(min, max)
71. var g = this.randomNum(min, max)
72. var b = this.randomNum(min, max)
73. return 'rgb(' + r + ',' + g + ',' + b + ')'
74. },
75. drawPic () {
76. var canvas = document.getElementById('s-canvas')
77. var ctx = canvas.getContext('2d')
78. ctx.textBaseline = 'bottom'
79. // 绘制背景
80. ctx.fillStyle = this.randomColor(
81. this.backgroundColorMin,
82. this.backgroundColorMax
83. )
84. ctx.fillRect(0, 0, this.contentWidth, this.contentHeight)
85. // 绘制文字
86. for (let i = 0; i < this.identifyCode.length; i++) {
87. this.drawText(ctx, this.identifyCode[i], i)
88. }
89. this.drawLine(ctx)
90. this.drawDot(ctx)
91. },
92. drawText (ctx, txt, i) {
93. ctx.fillStyle = this.randomColor(this.colorMin, this.colorMax)
94. ctx.font =
95. this.randomNum(this.fontSizeMin, this.fontSizeMax) + 'px SimHei'
96. var x = (i + 1) * (this.contentWidth / (this.identifyCode.length + 1))
97. var y = this.randomNum(this.fontSizeMax, this.contentHeight - 5)
98. var deg = this.randomNum(-30, 30)
99. // 修改坐标原点和旋转角度
100. ctx.translate(x, y)
101. ctx.rotate(deg * Math.PI / 270)
102. ctx.fillText(txt, 0, 0)
103. // 恢复坐标原点和旋转角度
104. ctx.rotate(-deg * Math.PI / 270)
105. ctx.translate(-x, -y)
106. },
107. drawLine (ctx) {
108. // 绘制干扰线
109. for (let i = 0; i < 2; i++) {
110. ctx.strokeStyle = this.randomColor(
111. this.lineColorMin,
112. this.lineColorMax
113. )
114. ctx.beginPath()
115. ctx.moveTo(
116. this.randomNum(0, this.contentWidth),
117. this.randomNum(0, this.contentHeight)
118. )
119. ctx.lineTo(
120. this.randomNum(0, this.contentWidth),
121. this.randomNum(0, this.contentHeight)
122. )
123. ctx.stroke()
124. }
125. },
126. drawDot (ctx) {
127. // 绘制干扰点
128. for (let i = 0; i < 20; i++) {
129. ctx.fillStyle = this.randomColor(0, 255)
130. ctx.beginPath()
131. ctx.arc(
132. this.randomNum(0, this.contentWidth),
133. this.randomNum(0, this.contentHeight),
134. 1,
135. 0,
136. 2 * Math.PI
137. )
138. ctx.fill()
139. }
140. }
141. },
142. watch: {
143. identifyCode () {
144. this.drawPic()
145. }
146. },
147. mounted () {
148. this.drawPic()
149. }
150. }
151. </script>
152. <style lang='less' scoped>
153. .s-canvas {
154. height: 38px;
155. cursor: pointer;
156. }
157. .s-canvas canvas{
158. margin-top: 1px;
159. margin-left: 8px;
160. }
161. </style>

3、一般是登录页面用到这个，在你的登录页面的from表单的相应位置加上填写验证码的html

1. <el-form-item prop="verifycode">
2. <el-input v-model="user.verifycode" placeholder="请输入验证码" class="identifyinput">
3. </el-input>
4. </el-form-item>
5. <el-form-item>
6. <div class="identifybox">
7. <div @click="refreshCode">
8. <s-identify :identifyCode="identifyCode"></s-identify>
9. </div>
10. <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button>
11. </div>
12. </el-form-item>

4、在script下引入组件，并编写方法

1. <script>
2. // 引入图片验证码组件
3. import SIdentify from '@/components/identify'
4. export default {
5. components: { SIdentify },
6. data() {
7. /* 自定义验证码规则 */
8. const validateVerifycode = (rule, value, callback) => {
9. if (value === '') {
10. callback(new Error('请输入验证码'))
11. } else if (value !== this.identifyCode) {
12. callback(new Error('验证码不正确!'))
13. } else {
14. callback()
15. }
16. }
18. return {
19. identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
20. identifyCode: '',
21. rules: {
22. verifycode: [{
23. required: true,
24. trigger: 'blur',
25. validator: validateVerifycode,}]
26. }
27. }
28. },
29. mounted(){
30. this.identifyCode='';
31. this.makeCode(this.identifyCodes,4);
32. history.pushState(null, null, document.URL);
33. if (window.history && window.history.pushState) {
34. $(window).on('popstate', function (){
35. window.history.pushState('forward', null, '');
36. window.history.forward(1);
37. });
38. window.history.pushState('forward', null, ''); //在IE中必须得有这两行
39. window.history.forward(1);
40. }
41. },
42. methods: {
43. randomNum(min, max) {
44. return Math.floor(Math.random() * (max - min) + min)
45. },
46. // 切换验证码
47. refreshCode() {
48. this.identifyCode = ''
49. this.makeCode(this.identifyCodes, 4)
50. },
51. // 生成随机验证码
52. makeCode(o, l) {
53. for (let i = 0; i < l; i++) {
54. this.identifyCode += this.identifyCodes[
55. Math.floor(Math.random() * (this.identifyCodes.length - 0) + 0)
56. ]
57. }
58. },
59. }
60. }
61. </script>

5、效果