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
| <template>
| <div class="s-canvas" :style="{'width:': contentWidth+'px', 'height': contentHeight+'px'}" @click="handleClick">
| <canvas id="s-canvas" width="130" height="48"></canvas>
| </div>
| </template>
| <script>
| export default{
| name: 'SIdentify',
| props: {
| identifyCode: { //默认***
| type: String,
| default: '1234'
| },
| fontSizeMin: { // 字体最小值
| type: Number,
| default: 25
| },
| fontSizeMax: { // 字体最大值
| type: Number,
| default: 35
| },
| backgroundColorMin: { // 验证码图片背景色最小值
| type: Number,
| default: 200
| },
| backgroundColorMax: { // 验证码图片背景色最大值
| type: Number,
| default: 220
| },
| dotColorMin: { // 背景干扰点最小值
| type: Number,
| default: 60
| },
| dotColorMax: { // 背景干扰点最大值
| type: Number,
| default: 120
| },
| contentWidth: { //容器宽度
| type: Number,
| default: 130
| },
| contentHeight: { //容器高度
| type: Number,
| default: 48
| }
| },
| 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 + ')'
| },
| drawPic () {
| let canvas = document.getElementById('s-canvas')
| let ctx = canvas.getContext('2d')
| ctx.textBaseline = 'bottom'
| // 绘制背景
| ctx.fillStyle = this.randomColor(this.backgroundColorMin, this.backgroundColorMax)
| 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(50, 160) //随机生成字体颜色
| 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(-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)
| },
| drawLine (ctx) {
| // 绘制干扰线
| for (let i = 0; i < 4; i++) {
| ctx.strokeStyle = this.randomColor(100, 200)
| 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 < 30; 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()
| }
| },
| handleClick() {
| this.$emit('click');
| }
| },
| watch: {
| identifyCode () {
| this.drawPic()
| }
| },
| mounted () {
| this.drawPic();
| }
| }
| </script>
|
| <style scoped>
| .s-canvas {
| cursor: pointer;
| vertical-align: middle;
| }
| .s-canvas canvas {
| width: 100%;
| height: 100%;
| -o-object-fit: contain;
| -webkit-object-fit: contain;
| object-fit: contain;
| }
| </style>
|
|
