各个方法

在输入框中定义一个位置存放图形

完整代码 方便复制粘贴

import React, { Component } from 'react';

import styles from './leftLogin.scss';

import { withRouter } from 'dva/router';

import { connect } from 'dva';

import { Form, Icon, Input, Button, Checkbox } from 'antd';

@connect(({ login }) => ({

login,

}))

class leftLogin extends Component {

constructor(props) {

super(props);

this.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, // 默认不显示验证码的错误信息

};

}

UNSAFE_componentWillMount() {

this.canvas = React.createRef();

}

componentDidMount() {

this.drawPic();

}

// 点击登录按钮

handleSubmit = e => {

e.preventDefault();

this.drawPic();

this.props.form.validateFields((err, values) => {

if (!err && this.state.showError !== true) {

// 调登录接口

const { dispatch } = this.props;

dispatch({

type: 'login/login',

payload: {

account: values.username,

pwd: values.password

}

})

this.props.form.setFieldsValue({

sendcode: '',

});

this.setState({

showError: false

})

}

});

}

// 跳转到忘记密码页

forget = () => {

this.props.history.push('/forget')

}

// 跳转到注册页

regist = () => {

this.props.history.push('/regist')

}

// 生成一个随机数

randomNum = (min, max) => {

return Math.floor(Math.random() * (max - min) + min)

}

drawPic = () => {

this.randomCode()

}

// 生成一个随机的颜色

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)

let fontSize = this.randomNum(this.state.fontSizeMin, this.state.fontSizeMax)

ctx.font = fontSize + 'px SimHei'

let padding = 10;

let 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

}

let 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++) {

let index = Math.floor(Math.random() * 57);

random += str[index];

}

this.setState({

code: random

},()=>{

let canvas = this.canvas.current;

let 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;

const suffix =






return (



<Form onSubmit={this.handleSubmit} style={{ width: '398px', margin: '0 auto', fontSize: '12px' }}>

<Form.Item>

{getFieldDecorator('username', {

rules: [{ required: true, message: '请输入用户名!' }, {

pattern: /^1[3456789]\d{9}$/,

message: '手机号格式不正确'

}],

})(

<Input

size="large"

prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}

placeholder="请输入手机号"

/>,

)}

</Form.Item>

<Form.Item>

{getFieldDecorator('password', {

rules: [{ required: true, message: '请输入密码!' }, {

pattern: /^.{6,}$/,

message: '密码格式不正确(不得低于6位)'

}],

})(

<Input

size="large"

prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}

type="password"

placeholder="请输入密码"

/>,

)}

</Form.Item>

<Form.Item>

{getFieldDecorator('sendcode', {

rules: [{ required: true, message: '请输入校验码!' },],

})(

<Input

size="large"

prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}

suffix={suffix}

onChange={this.changeCode}

placeholder="请输入校验码"

/>,

)}

{

this.state.showError ?

请输入正确的验证码

: null

}

</Form.Item>

          <Form.Item className={this.state.showError ? styles.inputBottom : ''}>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(<Checkbox>7天内免登录</Checkbox>)}
<a className={styles.forget} onClick={this.forget}>
忘记密码
</a>
<Button
size="large"
type="primary"
htmlType="submit"
className={styles.button}
>
登录
</Button>
<a onClick={this.regist}>新用户注册</a>
</Form.Item>
</Form>
</div>
);

}

}

const WrappedNormalLoginForm = Form.create({ name: 'normal_login' })(leftLogin);

export default withRouter(WrappedNormalLoginForm);

在React中随机生成图形验证码的更多相关文章

  1. ASP.NET中如何生成图形验证码

    通常生成一个图形验证码主要 有3个步骤: (1)随机产生一个长度为N的随机字符串,N的值可由开发可由开发人员自行设置.该字符串可以包含数字.字母等. (2)将随机生成的字符串创建成图片,并显示. (3 ...

  2. java生成图形验证码

    效果图 import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.Buf ...

  3. C#生成图形验证码

    先看效果: 再上代码 public class CaptchaHelper { private static Random rand = new Random(); private static in ...

  4. PHP5 GD库生成图形验证码(汉字)

    PHP5 GD库生成图形验证码且带有汉字的实例分享. 1,利用GD库函数生成图片,并在图片上写指定字符imagecreatetruecolor 新建一个真彩色图像imagecolorallocate ...

  5. PHP5生成图形验证码(有汉字)

    利用PHP5中GD库生成图形验证码 类似于下面这样 1.利用GD库函数生成图片,并在图片上写指定字符 imagecreatetruecolor   新建一个真彩色图像      imagecolora ...

  6. python 生成图形验证码

    文章链接:https://mp.weixin.qq.com/s/LYUBRNallHcjnhJb1R3ZBg 日常在网站使用过程中经常遇到图形验证,今天准备自己做个图形验证码,这算是个简单的功能,也适 ...

  7. asp.net 生成图形验证码(字母和数字混合)

    验证码技术是网站开发过程中比较重要的技术,可以防止非法人员利用注册机或者登陆工具来攻击我们的网站.下面是效果图: 具体实现方法如下: 1.主要思路是:引用Using System.Drawing命名空 ...

  8. (转)Android 之生成图形验证码

    import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; impor ...

  9. 【Java】生成图形验证码

    本章介绍一个能生成比较好看的图形验证码类 生成验证码工具类 package com.util; import java.awt.Color; import java.awt.Font; import ...

随机推荐

  1. Educational Codeforces Round 82 C. Perfect Keyboard

    Polycarp wants to assemble his own keyboard. Layouts with multiple rows are too complicated for him ...

  2. Myeclipse下PHP开发环境搭建及运行

    外接CSDN链接 http://blog.csdn.net/yuxiangaaaaa/article/details/54948426 这是php初始设置,后面进行重新设置

  3. letter-spacing 与 word-spacing 结合使用,造成文字反转

    文字未反转时,如图: 文字反转时,如图: 以上效果只是因为发现记录下来,目前并无实用,也许未来用得着它.

  4. 了解js闭包

    定义:闭包是由函数以及创建该函数的环境组合而成.这个环境包含了这个闭包创建时所能访问的所有局部变量 理解:能够读取其他函数的内部变量的函数,并开辟新的作用域(环境) 例子1 function pare ...

  5. PAT A1135 Is It A Red Black Tree

    判断一棵树是否是红黑树,按题给条件建树,dfs判断即可~ #include<bits/stdc++.h> using namespace std; ; struct node { int ...

  6. [转]JSP自定义标签

    原文链接 当jsp的内置标签和jstl标签库内的标签都满足不了需求,这时候就需要开发者自定义标签. 自定义标签 下面我们先来开发一个自定义标签,然后再说它的原理吧! 自定义标签的开发步骤 步骤一 编写 ...

  7. requests库 代理

    import requests proxy = { 'http': '125.123.137.2208:9999' } res = requests.get('http://httpbin.org/i ...

  8. pycharm add configuration

    新建项目运行的时候 现实额e di t configrations

  9. Eclipse开发快捷键

    ctrl+alt+r:查找资源 ctrl+o:快速outLine ctrl+e:快速切换编辑器 ctrl+./ctrl+1:下一个错误修改

  10. KNN-学习笔记

    仅供学习使用 练习1 # coding:utf-8 # 2019/10/16 16:49 # huihui # ref: import numpy as np from sklearn import ...