vue前端生成验证码及操作

1. npm i less
2. 
3. npm i less-loader

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. }
156. .s-canvas canvas{
157. margin-top: 1px;
158. margin-left: 8px;
159. }
160. </style>

1. <template>
2.     <div class="wrapper">
3.         <el-row :gutter="20">
4.     <el-col :span="16">
5.                 <el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
6.             </el-col>
7.             <el-col :span="8" style="margin-top: 8px;">
8.                 <span @click="refreshCode"  style="cursor: pointer;margin-top: 10px">
9.                     <s-identify :identifyCode="identifyCode"></s-identify>
10.                 </span>
11.             </el-col>
12.         </el-row>
13.     </div>
14. </template>
15. 
16. <script>
17. import SIdentify from '@/components/identify.vue'
18. 
19. export default {
20.     name: "Login",
21. components: { SIdentify },
22.     data(){
23.         return{
24.             // 图片验证码
25. identifyCode: '',
26. // 验证码规则
27. identifyCodes: '3456789ABCDEFGHGKMNPQRSTUVWXY',
28.         }
29.     },
30.     methods: {
31.         // 切换验证码
32. refreshCode() {
33. this.identifyCode = ''
34. this.makeCode(this.identifyCodes, 4)
35.         },
36. // 生成随机验证码
37. makeCode(o, l) {
38. for (let i = 0; i < l; i++) {
39. this.identifyCode += this.identifyCodes[Math.floor(Math.random() * (this.identifyCodes.length))]
40.             }
41.         },
42.     },
43.     mounted() {
44.         //进入页面则刷新验证码图片
45. this.refreshCode();
46.     },
47. }
48. </script>