针对react-captcha-code第三方插件不能每次触发深颜色的处理
2023-09-27 14:22:48 时间
针对react-captcha-code第三方插件不能每次触发深颜色的处理:
react-captcha-code npm地址
https://www.npmjs.com/package/react-captcha-code/v/1.0.4
在node_modules中找到这个第三方依赖包:
将之改造成class组件:MyCaptcha.js
验证码组件:
/**
*
* 原本使用react-captcha-code 这个第三方插件 但是会生成浅色字符验证码
*
* 只针对颜色进行了处理 换成了class的形式
*
* 如还想使用以前的第三方组件 只需在 login组件中 引入方式去掉My 即import Captcha from '../component/Captcha';
*
*
* handleClickCaptcha
* 这个方法是父组件传入的回调方法
*/
import React, { PureComponent } from 'react';
export default class Login extends PureComponent {
state = {
height: 40,//canvas的高
width: 100,//canvas的宽
bgColor: '#DFF0D8',//背景颜色
charNum: 4,//验证码个数
fontSize: 25,//验证码字体大小
originalCharacter: [//可以生成验证码的字符
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n',
'p',
'q',
'r',
's',
't',
'u',
'v',
'w',
'x',
'y',
'z',
]
};
handleClick = () => {
// 触发父组件传来的事件 更新
this.props.handleClickCaptcha(this.generateCaptcha())
}
// 随机数字
randomNum = (m, n) => {
return Math.floor(Math.random() * (n - m + 1) + m);
}
// 随机颜色
randomColor = () => {
return `rgb(${this.randomNum(0, 92)}, ${this.randomNum(0, 92)}, ${this.randomNum(0, 92)})`;
}
// 返回验证码
generateCaptcha = () => {
let { height, width, bgColor, fontSize, charNum, originalCharacter } = this.state
let checkCode = '';
let canvas = document.getElementById("canvas")
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height);
ctx.beginPath()
ctx.fillStyle = bgColor;
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < charNum; i++) {
const charGap = Math.round(width / charNum)
const offset = Math.round(charGap / 2) - 6;
const code = originalCharacter[this.randomNum(0, originalCharacter.length - 1)];
checkCode += code;
ctx.save();
ctx.beginPath();
ctx.fillStyle = "white";
ctx.strokeStyle = this.randomColor();
ctx.font = `${fontSize}px serif`;
ctx.rotate((Math.PI / 180) * this.randomNum(-5, 5));
ctx.strokeText(code, offset + i * charGap, height / 2 + 8);
ctx.beginPath();
ctx.moveTo(this.randomNum(0, width), this.randomNum(0, height));
ctx.lineTo(this.randomNum(0, width), this.randomNum(0, height));
ctx.stroke();
ctx.restore();
}
return checkCode
}
componentDidMount() {
// 页面初次渲染 第一次调用父组件传过来的函数并将新生成的验证码返回
this.props.handleClickCaptcha(this.generateCaptcha())
}
render() {
return (
<canvas id="canvas" onClick={this.handleClick}></canvas>
)
}
}
使用:
引用:
import Captcha from '../component/MyCaptcha';
使用:
<Captcha handleClickCaptcha={this.handleClickCaptcha.bind(this)} />
方法:
// 接收验证码
handleClickCaptcha(data) {
this.setState({
captcha: data,
})
}
相关文章
- MVC 公共类App_Code不识别
- [转] react-router4 + webpack Code Splitting
- Google Analytics Code Explanation
- Code metrics values
- C#订阅与发布标准实现 visual studio code .net 开发 设计模式之☞策略模式 C#字符串转二进制、二进制转字符串 c# 接口的协变和逆变 c# 使用迭代器来创建可枚举类型 博客园首页新随笔联系订阅管理 随笔 - 117 文章 - 0 评论 - 57 c# 创建,加载,修改XML文档
- github 迁移google code 项目
- ORA-00600: internal error code, arguments: [kkqtSetOp.1]
- 代码对比软件——code compare
- JavaScript - 根据后端返回的唯一 ID / code,生成 “唯一“ 的推荐码、邀请码、订单号、加密路由、一串英文+数字长字符等 (支持反序列化原 ID 解码,逆向得出 ID 二者互转)
- VS Code配置Matlab环境笔记-文本编辑、语法检查、运行脚本
- EF Code First更新数据库时报错:provider: SQL Network Interfaces, error: 26
- Developing ASP.NET Core Apps by Using Visual Studio Code
- 2021-09-20 Process finished with exit code -1073741515 (0xC0000135) QT Clion
- Code First 重复外键
- vs code设置默认浏览器