本教程操作环境：windows10系统、react18版、dell g3电脑。
react怎么实现图片验证？
react实现图片验证码
效果如图所示：
import react, { component } from 'react'import { icon, input, form } from 'antd';class operationaldatamanagement extends component { state = { code: '', codelength: 4, fontsizemin: 20, fontsizemax: 22, backgroundcolormin: 240, backgroundcolormax: 250, colormin: 10, colormax: 20, linecolormin: 40, linecolormax: 180, contentwidth: 96, contentheight: 38, showerror: false, // 默认不显示验证码的错误信息 } componentwillmount() { this.canvas = react.createref() } componentdidmount() { this.drawpic() } // 生成一个随机数 // eslint-disable-next-line arrow-body-style randomnum = (min, max) => { return math.floor(math.random() * (max - min) + min) } drawpic = () => { this.randomcode() } // 生成一个随机的颜色 // eslint-disable-next-line react/sort-comp randomcolor(min, max) { const r = this.randomnum(min, max) const g = this.randomnum(min, max) const b = this.randomnum(min, max) return `rgb(${r}, ${g}, ${b})` } drawtext(ctx, txt, i) { ctx.fillstyle = this.randomcolor(this.state.colormin, this.state.colormax) const fontsize = this.randomnum(this.state.fontsizemin, this.state.fontsizemax) ctx.font = fontsize + 'px simhei' const padding = 10; const offset = (this.state.contentwidth - 40) / (this.state.code.length - 1) let x = padding; if (i > 0) { x = padding + (i * offset) } let y = this.randomnum(this.state.fontsizemax, this.state.contentheight - 5) if (fontsize > 40) { y = 40 } const deg = this.randomnum(-10, 10) // 修改坐标原点和旋转角度 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 < 1; i++) { ctx.strokestyle = this.randomcolor(this.state.linecolormin, this.state.linecolormax) ctx.beginpath() ctx.moveto(this.randomnum(0, this.state.contentwidth), this.randomnum(0, this.state.contentheight)) ctx.lineto(this.randomnum(0, this.state.contentwidth), this.randomnum(0, this.state.contentheight)) ctx.stroke() } } drawdot(ctx) { // 绘制干扰点 for (let i = 0; i < 100; i++) { ctx.fillstyle = this.randomcolor(0, 255) ctx.beginpath() ctx.arc(this.randomnum(0, this.state.contentwidth), this.randomnum(0, this.state.contentheight), 1, 0, 2 * math.pi) ctx.fill() } } reloadpic = () => { this.drawpic() this.props.form.setfieldsvalue({ sendcode: '', }); } // 输入验证码 changecode = e => { if (e.target.value.tolowercase() !== '' && e.target.value.tolowercase() !== this.state.code.tolowercase()) { this.setstate({ showerror: true }) } else if (e.target.value.tolowercase() === '') { this.setstate({ showerror: false }) } else if (e.target.value.tolowercase() === this.state.code.tolowercase()) { this.setstate({ showerror: false }) } } // 随机生成验证码 randomcode() { let random = '' // 去掉了i l i o o,可自行添加 const str = 'qwertyuplkjhgfdsazxcvbnmqwertyupkjhgfdsazxcvbnm1234567890' for (let i = 0; i < this.state.codelength; i++) { const index = math.floor(math.random() * 57); random += str[index]; } this.setstate({ code: random }, () => { const canvas = this.canvas.current; const ctx = canvas.getcontext('2d') ctx.textbaseline = 'bottom' // 绘制背景 ctx.fillstyle = this.randomcolor(this.state.backgroundcolormin, this.state.backgroundcolormax) ctx.fillrect(0, 0, this.state.contentwidth, this.state.contentheight) // 绘制文字 for (let i = 0; i < this.state.code.length; i++) { this.drawtext(ctx, this.state.code[i], i) } this.drawline(ctx) this.drawdot(ctx) }) } render() { const { getfielddecorator } = this.props.form; return ( <div style={{ display: 'flex', alignitems: 'center' }}> <div style={{ width: 300 }}> <form.item classname='for-form'> {getfielddecorator('sendcode', { rules: [ { required: true, message: '请输入校验码!' }, { validator: (rule, value, callback) => { if (value) { if(value.tolowercase()===this.state.code.tolowercase()){ callback() this.setstate({ sendcode: value, showerror: false }) } else { callback('请输入正确的验证码') this.setstate({ showerror: true }) } } else { callback() } } } ], })( <input prefix={<icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} onchange={this.changecode} placeholder="请输入校验码" /> )} </form.item> </div> <div> <canvas onclick={this.reloadpic} ref={this.canvas} width='100' height='30'> </canvas> </div> </div> ) }}const wrappedregistrationform = form.create()(operationaldatamanagement);export default wrappedregistrationform;
推荐学习：《react视频教程》
以上就是react怎么实现图片验证的详细内容。