react如何实现图片验证(react,web开发)

接下来，请跟着小编一起来学习吧！

react实现图片验证的方法：1、打开相应的react文件；2、通过“randomNum = (min, max) => {...}”方法生成一个随机数；3、通过“drawLine(ctx) {...}”方法绘制干扰线；4、使用“randomCode() {...}”方法随机生成验证码即可。

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)
returnrgb(${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+(ioffset)
}
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(degMath.PI/180)
ctx.fillText(txt,0,0)
//恢复坐标原点和旋转角度
ctx.rotate(-degMath.PI/180)
ctx.translate(-x,-y)
}
drawLine(ctx){
//绘制干扰线
for(leti=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(leti=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,2Math.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
})
}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<this.state.codeLength;i++){
constindex=Math.floor(Math.random()57);
random+=str[index];
}
this.setState({
code:random
},()=>{
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<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(
<divstyle={{display:'flex',alignItems:'center'}}>
<divstyle={{width:300}}>
<Form.ItemclassName='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={<Icontype="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>
)
}
}
constWrappedRegistrationForm=Form.create()(OperationalDataManagement);
exportdefaultWrappedRegistrationForm;

若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！