针对react-captcha-code第三方插件不能每次触发深颜色的处理

针对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,
        })
    }