node验证码svg-captcha的使用和扩展,支持数学公式!支持中文!

npm地址
但官方提供的方法比较单一,情况复杂则需要看源码;
接下来,让我们对源码进行解析,完成更复杂的验证码
官方验证码支持两种
1:传统的图形验证码

		//随机背景颜色
        let random = 0;
        const aryNum = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];
        let str = "#";
        _.times(6, i => {
            random = parseInt(Math.random() * 16);
            str += aryNum[random];
        });
        const options = {
            noise: 15,   //线条
            color: true, //是否随机线条颜色,源码中,如果为true,则字体颜色也会随机
            background: str, //在这里我们写了一个随机颜色的方法,可以对背景颜色进行随机
            fontSize: 5 //字体大小
        };
        //如果不想随机文字颜色,则在源码index.js中找到getText函数,将random.color去掉即可
        //如果觉得随机的背景颜色验证码颜色过深,则可以在源码index中修改createCaptcha函数,用const bgRect = bg ?
		`` : '';替换掉源码的内容即可
        //普通图片验证码
        let text = svg_captcha.randomText(options); //调用内置的随机文本的函数
        while (!this.validateCaptcha(text)) { //使用扩展的正则表达式验证验证码必须包含数字和英文
            text = svg_captcha.randomText(options);
        }
        const data = svg_captcha(text, options); //使用内置的方法生成验证码图片和文本
		//返回的data参数为图片验证码,直接return end(data)即可
	
		//验证验证码文本格式
    	validateCaptcha(text) {
        const _chekText = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$)/);
        if (!_chekText.test(text)) {
            return false;
        } else {
            return true;
        }
    }

node验证码svg-captcha的使用和扩展,支持数学公式!支持中文!_第1张图片

2:数学工时算法

// 除了以下内容之外,其他的文案设置参照上面的扩展方法即可
const data = svg_captcha(text, options);
        //算数验证码
        // const captcha = svg_captcha.createMathExpr(
        //     {
        //         noise: 15,
        //         color: true,
        //         background: str,
        //         mathMin: 1,
        //         mathMax: 99,
        //         mathOperator: "+/-"
        //     }
        // );

如果想支持中文怎么办?
该验证码默认使用的ttf字体不支持中文,所以我们需要把node_module下的svg-captcha下fonts下的ttf字体替换成
中文ttf字体

node验证码svg-captcha的使用和扩展,支持数学公式!支持中文!_第2张图片

你可能感兴趣的:(svg-captcha,验证码,express,JavaScript,node,node验证码,svg-captcha,node中文验证码,node,captcha)