我是靠谱客的博主 潇洒高跟鞋,这篇文章主要介绍react的滑动图片验证码组件的示例代码,现在分享给大家,希望可以做个参考。

业务需求,需要在系统登陆的时候,使用“滑动图片验证码”,来验证操作的不是机器人。

效果图

使用方式

在一般的页面组件引用即可。onReload这个函数一般是用来请求后台图片的。

复制代码
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
class App extends Component { state = { url: "" } componentDidMount() { this.setState({ url: getImage() }) } onReload = () => { this.setState({ url: getImage() }) } render() { return ( <div> <ImageCode imageUrl={this.state.url} onReload={this.onReload} onMatch={() => { console.log("code is match") }} /> </div> ) } }

上代码

复制代码
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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
// index.js /** * @name ImageCode * @desc 滑动拼图验证 * @author darcrand * @version 2019-02-26 * * @param {String} imageUrl 图片的路径 * @param {Number} imageWidth 展示图片的宽带 * @param {Number} imageHeight 展示图片的高带 * @param {Number} fragmentSize 滑动图片的尺寸 * @param {Function} onReload 当点击'重新验证'时执行的函数 * @param {Function} onMath 匹配成功时执行的函数 * @param {Function} onError 匹配失败时执行的函数 */ import React from "react" import "./styles.css" const icoSuccess = require("./icons/success.png") const icoError = require("./icons/error.png") const icoReload = require("./icons/reload.png") const icoSlider = require("./icons/slider.png") const STATUS_LOADING = 0 // 还没有图片 const STATUS_READY = 1 // 图片渲染完成,可以开始滑动 const STATUS_MATCH = 2 // 图片位置匹配成功 const STATUS_ERROR = 3 // 图片位置匹配失败 const arrTips = [{ ico: icoSuccess, text: "匹配成功" }, { ico: icoError, text: "匹配失败" }] // 生成裁剪路径 function createClipPath(ctx, size = 100, styleIndex = 0) { const styles = [ [0, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0], [0, 0, 1, 1], [0, 1, 0, 0], [0, 1, 0, 1], [0, 1, 1, 0], [0, 1, 1, 1], [1, 0, 0, 0], [1, 0, 0, 1], [1, 0, 1, 0], [1, 0, 1, 1], [1, 1, 0, 0], [1, 1, 0, 1], [1, 1, 1, 0], [1, 1, 1, 1] ] const style = styles[styleIndex] const r = 0.1 * size ctx.save() ctx.beginPath() // left ctx.moveTo(r, r) ctx.lineTo(r, 0.5 * size - r) ctx.arc(r, 0.5 * size, r, 1.5 * Math.PI, 0.5 * Math.PI, style[0]) ctx.lineTo(r, size - r) // bottom ctx.lineTo(0.5 * size - r, size - r) ctx.arc(0.5 * size, size - r, r, Math.PI, 0, style[1]) ctx.lineTo(size - r, size - r) // right ctx.lineTo(size - r, 0.5 * size + r) ctx.arc(size - r, 0.5 * size, r, 0.5 * Math.PI, 1.5 * Math.PI, style[2]) ctx.lineTo(size - r, r) // top ctx.lineTo(0.5 * size + r, r) ctx.arc(0.5 * size, r, r, 0, Math.PI, style[3]) ctx.lineTo(r, r) ctx.clip() ctx.closePath() } class ImageCode extends React.Component { static defaultProps = { imageUrl: "", imageWidth: 500, imageHeight: 300, fragmentSize: 80, onReload: () => {}, onMatch: () => {}, onError: () => {} } state = { isMovable: false, offsetX: 0, //图片截取的x offsetY: 0, //图片截取的y startX: 0, // 开始滑动的 x oldX: 0, currX: 0, // 滑块当前 x, status: STATUS_LOADING, showTips: false, tipsIndex: 0 } componentDidUpdate(prevProps) { // 当父组件传入新的图片后,开始渲染 if (!!this.props.imageUrl && prevProps.imageUrl !== this.props.imageUrl) { this.renderImage() } } renderImage = () => { // 初始化状态 this.setState({ status: STATUS_LOADING }) // 创建一个图片对象,主要用于canvas.context.drawImage() const objImage = new Image() objImage.addEventListener("load", () => { const { imageWidth, imageHeight, fragmentSize } = this.props // 先获取两个ctx const ctxShadow = this.refs.shadowCanvas.getContext("2d") const ctxFragment = this.refs.fragmentCanvas.getContext("2d") // 让两个ctx拥有同样的裁剪路径(可滑动小块的轮廓) const styleIndex = Math.floor(Math.random() * 16) createClipPath(ctxShadow, fragmentSize, styleIndex) createClipPath(ctxFragment, fragmentSize, styleIndex) // 随机生成裁剪图片的开始坐标 const clipX = Math.floor(fragmentSize + (imageWidth - 2 * fragmentSize) * Math.random()) const clipY = Math.floor((imageHeight - fragmentSize) * Math.random()) // 让小块绘制出被裁剪的部分 ctxFragment.drawImage(objImage, clipX, clipY, fragmentSize, fragmentSize, 0, 0, fragmentSize, fragmentSize) // 让阴影canvas带上阴影效果 ctxShadow.fillStyle = "rgba(0, 0, 0, 0.5)" ctxShadow.fill() // 恢复画布状态 ctxShadow.restore() ctxFragment.restore() // 设置裁剪小块的位置 this.setState({ offsetX: clipX, offsetY: clipY }) // 修改状态 this.setState({ status: STATUS_READY }) }) objImage.src = this.props.imageUrl } onMoveStart = e => { if (this.state.status !== STATUS_READY) { return } // 记录滑动开始时的绝对坐标x this.setState({ isMovable: true, startX: e.clientX }) } onMoving = e => { if (this.state.status !== STATUS_READY || !this.state.isMovable) { return } const distance = e.clientX - this.state.startX let currX = this.state.oldX + distance const minX = 0 const maxX = this.props.imageWidth - this.props.fragmentSize currX = currX < minX ? 0 : currX > maxX ? maxX : currX this.setState({ currX }) } onMoveEnd = () => { if (this.state.status !== STATUS_READY || !this.state.isMovable) { return } // 将旧的固定坐标x更新 this.setState(pre => ({ isMovable: false, oldX: pre.currX })) const isMatch = Math.abs(this.state.currX - this.state.offsetX) < 5 if (isMatch) { this.setState(pre => ({ status: STATUS_MATCH, currX: pre.offsetX }), this.onShowTips) this.props.onMatch() } else { this.setState({ status: STATUS_ERROR }, () => { this.onReset() this.onShowTips() }) this.props.onError() } } onReset = () => { const timer = setTimeout(() => { this.setState({ oldX: 0, currX: 0, status: STATUS_READY }) clearTimeout(timer) }, 1000) } onReload = () => { if (this.state.status !== STATUS_READY && this.state.status !== STATUS_MATCH) { return } const ctxShadow = this.refs.shadowCanvas.getContext("2d") const ctxFragment = this.refs.fragmentCanvas.getContext("2d") // 清空画布 ctxShadow.clearRect(0, 0, this.props.fragmentSize, this.props.fragmentSize) ctxFragment.clearRect(0, 0, this.props.fragmentSize, this.props.fragmentSize) this.setState( { isMovable: false, offsetX: 0, //图片截取的x offsetY: 0, //图片截取的y startX: 0, // 开始滑动的 x oldX: 0, currX: 0, // 滑块当前 x, status: STATUS_LOADING }, this.props.onReload ) } onShowTips = () => { if (this.state.showTips) { return } const tipsIndex = this.state.status === STATUS_MATCH ? 0 : 1 this.setState({ showTips: true, tipsIndex }) const timer = setTimeout(() => { this.setState({ showTips: false }) clearTimeout(timer) }, 2000) } render() { const { imageUrl, imageWidth, imageHeight, fragmentSize } = this.props const { offsetX, offsetY, currX, showTips, tipsIndex } = this.state const tips = arrTips[tipsIndex] return ( <div className="image-code" style={{ width: imageWidth }}> <div className="image-container" style={{ height: imageHeight, backgroundImage: `url("${imageUrl}")` }}> <canvas ref="shadowCanvas" className="canvas" width={fragmentSize} height={fragmentSize} style={{ left: offsetX + "px", top: offsetY + "px" }} /> <canvas ref="fragmentCanvas" className="canvas" width={fragmentSize} height={fragmentSize} style={{ top: offsetY + "px", left: currX + "px" }} /> <div className={showTips ? "tips-container--active" : "tips-container"}> <i className="tips-ico" style={{ backgroundImage: `url("${tips.ico}")` }} /> <span className="tips-text">{tips.text}</span> </div> </div> <div className="reload-container"> <div className="reload-wrapper" onClick={this.onReload}> <i className="reload-ico" style={{ backgroundImage: `url("${icoReload}")` }} /> <span className="reload-tips">刷新验证</span> </div> </div> <div className="slider-wrpper" onMouseMove={this.onMoving} onMouseLeave={this.onMoveEnd}> <div className="slider-bar">按住滑块,拖动完成拼图</div> <div className="slider-button" onMouseDown={this.onMoveStart} onMouseUp={this.onMoveEnd} style={{ left: currX + "px", backgroundImage: `url("${icoSlider}")` }} /> </div> </div> ) } } export default ImageCode
复制代码
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
// styles.css .image-code { padding: 10px; user-select: none; } .image-container { position: relative; background-color: #ddd; } .canvas { position: absolute; top: 0; left: 0; } .reload-container { margin: 20px 0; } .reload-wrapper { display: inline-flex; align-items: center; cursor: pointer; } .reload-ico { width: 20px; height: 20px; margin-right: 10px; background: center/cover no-repeat; } .reload-tips { font-size: 14px; color: #666; } .slider-wrpper { position: relative; margin: 10px 0; } .slider-bar { padding: 10px; font-size: 14px; text-align: center; color: #999; background-color: #ddd; } .slider-button { position: absolute; top: 50%; left: 0; width: 50px; height: 50px; border-radius: 25px; transform: translateY(-50%); cursor: pointer; background: #fff center/80% 80% no-repeat; box-shadow: 0 2px 10px 0 #333; } /* 提示信息 */ .tips-container, .tips-container--active { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; padding: 10px; transform: translate(-50%, -50%); transition: all 0.25s; background: #fff; border-radius: 5px; visibility: hidden; opacity: 0; } .tips-container--active { visibility: visible; opacity: 1; } .tips-ico { width: 20px; height: 20px; margin-right: 10px; background: center/cover no-repeat; } .tips-text { color: #666; }

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

最后

以上就是潇洒高跟鞋最近收集整理的关于react的滑动图片验证码组件的示例代码的全部内容,更多相关react内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(160)

评论列表共有 0 条评论

立即
投稿
返回
顶部