react如何实现图片验证

importReact,{Component}from'react'
import{Icon,Input,Form}from'antd';
classOperationalDataManagementextendsComponent{
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-linearrow-body-style
randomNum=(min,max)=>{
returnMath.floor(Math.random()*(max-min)+min)
}
drawPic=()=>{
this.randomCode()
}
//生成一个随机的颜色
//eslint-disable-next-linereact/sort-comp
randomColor(min,max){
constr=this.randomNum(min,max)
constg=this.randomNum(min,max)
constb=this.randomNum(min,max)
return`rgb(${r},${g},${b})`
}
drawText(ctx,txt,i){
ctx.fillStyle=this.randomColor(this.state.colorMin,this.state.colorMax)
constfontSize=this.randomNum(this.state.fontSizeMin,this.state.fontSizeMax)
ctx.font=fontSize+'pxSimHei'
constpadding=10;
constoffset=(this.state.contentWidth-40)/(this.state.code.length-1)
letx=padding;
if(i>0){
x=padding+(i*offset)
}
lety=this.randomNum(this.state.fontSizeMax,this.state.contentHeight-5)
if(fontSize>40){
y=40
}
constdeg=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(leti=0;i{
this.drawPic()
this.props.form.setFieldsValue({
sendcode:'',
});
}
//输入验证码
changeCode=e=>{
if(e.target.value.toLowerCase()!==''&&e.target.value.toLowerCase()!==this.state.code.toLowerCase()){
this.setSta免费云主机、域名te({
showError:true
})
}elseif(e.target.value.toLowerCase()===''){
this.setState({
showError:false
})
}elseif(e.target.value.toLowerCase()===this.state.code.toLowerCase()){
this.setState({
showError:false
})
}
}
//随机生成验证码
randomCode(){
letrandom=''
//去掉了IlioO,可自行添加
conststr='QWERTYUPLKJHGFDSAZXCVBNMqwertyupkjhgfdsazxcvbnm1234567890'
for(leti=0;i{
constcanvas=this.canvas.current;
constctx=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(leti=0;i


{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()
}
}
}
],
})(
}
onChange={this.changeCode}
placeholder="请输入校验码"
/>
)}