专栏首页fanzhh的技术笔记React人机验证控件

React人机验证控件

在使用React做前端,用户注册页面因为要短信验证,短信服务商要求加人机验证,于是我找到了 react-captcha-generator

感谢作者,非常好用,但是……短信服务商认为这个生成的图片太简单,“很简单,再加上几条横线就行……”。但怎么加横线呢?先找别的人机验证轮子,实在没有更合适的。自己从头做一个吧,又实在值不当的。

能不能在react-captcha-generator基础上修改呢?打开源码研究,谷歌搜如何在svg上加直线,还真弄成了。以下是代码:

import React, { Component } from 'react';

class ReactCaptchaGenerator extends Component {

    constructor(props) {
        super(props)
        this.state = {
            height: 100,
            width: 100,
            textColor: false,
            fontFamily: 'Verdana',
            fontSize: '30',
            paddingLeft: '20',
            paddingTop: '60',
            lenght: '5',
            background: 'none'
        }
        this.setData = this.setData.bind(this)
    }

    componentWillMount() {
        this.setData()
    }

    setData() {
        this.setState({
            height: this.props.height ? this.props.height : 100,
            width: this.props.width ? this.props.width : 100,
            textColor: this.props.textColor ? this.props.textColor : false,
            fontFamily: this.props.fontFamily ? this.props.fontFamily : 'Verdana',
            fontSize: this.props.fontSize ? this.props.fontSize : '30',
            paddingLeft: this.props.paddingLeft ? this.props.paddingLeft : '20',
            paddingTop: this.props.paddingTop ? this.props.paddingTop : '60',
            lenght: this.props.lenght ? this.props.lenght : '5',
            background: this.props.background ? this.props.background : 'none',
        })

        this.text = []
        this.originText = []
        this.possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (var i = 0; i < this.state.lenght; i++) {
            let char = this.possible.charAt(Math.floor(Math.random() * this.possible.length))
            this.text.push(
                `<text 
                    font-family="${this.state.fontFamily}" 
                    font-size="${this.state.fontSize}" 
                    x="${this.state.paddingLeft * i}" 
                    y="${this.state.paddingTop}"
                    fill="${ this.props.textColor ? this.props.textColor : "#" + ((1 << 24) * Math.random() | 0).toString(16)}"
                    transform="rotate(${Math.random() * (5 - 0) + 0})"
                >${char}</text>`
            )
            this.originText.push(
                char
            )
            /* 以下为增加部分*/
            let x1 = Math.floor(Math.random() * this.state.width)
            let x2 = Math.floor(Math.random() * this.state.width)
            let y1 = Math.floor(Math.random() * this.state.height)
            let y2= Math.floor(Math.random() * this.state.height)
            this.text.push(
                `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}"  style="stroke:rgb(255,0,0);stroke-width:2" />`
            )
           /* 增加部分结束 */
        }
        this.props.result(this.originText.join(''))

    }

    render() {

        return (
            <img
                style={{ background: this.state.background }}
                src={
                    'data:image/svg+xml;base64,' +
                    btoa('<svg ' +
                        'xmlns="http://www.w3.org/2000/svg" ' +
                        'height="' + this.state.height + '" ' +
                        'width="' + this.state.width + '">' +
                        this.text.join() +
                        '</svg>')
                }
                alt="" />
        );
    }
}

export default ReactCaptchaGenerator;

原来的验证图片:

修改前

修改之后的验证图片:

修改后

再次感谢原控件作者Vetal StekolschikovV

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用Sqlite3+Express.js+React实现在线答题(下)

    在使用Sqlite3+Express.js+React实现在线答题(上)中,我们将题目数据从word文件转为txt格式并导入到sqlite3中,使用Expres...

    fanzhh
  • Django REST + React + Redux 上传文件

    fanzhh
  • 以 React 的方式思考

    React 很棒的一点是创建应用中引导你思考的过程。这篇文档中,我们将通过运用React创建一个产品搜索列表,来引导你熟悉这个思考过程。

    fanzhh
  • 用 React 分页显示数据用react分页显示数据

    展示一下主要三个组件:父组件listBox、列表组件List、按钮组件PageButton

    一个会写诗的程序员
  • 用 SOLID 原则保驾 React 组件开发

    本世纪初,美国计算机专家和作者 Robert Cecil Martin 针对 OOP 编程,提出了可以很好配合的五个独立模式;后由重构等领域的专家 Michae...

    江米小枣
  • canvas 弹球

    mySoul
  • 从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/d...

    牧云云
  • Mybatis深入源码分析之Mapper与接口绑定原理源码分析

    紧接上篇文章:Mybatis深入源码分析之SqlSessionFactoryBuilder源码分析,这里再来分析下,Mapper与接口绑定原理。

    须臾之余
  • Flash在线拍摄用户头象

    很多网站在上传用户头象时,除了传统方式上传外,都支持在线摄像头拍照并做简单编辑,完成之后再将图象数据提交到服务端(比如ASP.Net),这几天正好需要这个功能,...

    菩提树下的杨过
  • JavaScript OOP(二):this关键字以及call、apply、bind

    JavaScript的this关键字非常灵活! this 返回的总是对象;即返回属性或方法“当前”所在的对象 1 var o1={ 2 name:'...

    用户1149564

扫码关注云+社区

领取腾讯云代金券