常用验证码之算术验证码

作者: 流眸Tel | 来源:发表于2020-06-30 15:25 被阅读0次

    写在前面

    这里是常用验证码的第二篇——算术验证码
    在上一篇已经实现了常用验证码之字符串验证码,感兴趣的可以去看一下~
    接下来要实现的就是字符串验证码了,先看下效果:

    算术验证码示例

    本篇记录纯前端写算术验证码。

    实现:算术验证码

    一般来讲,字符串、算数、gif、短信语音等验证码放在后端实现,但本着技术无界限的原则,前端依然是能照葫芦画瓢给实现出来的。
    本次要实现的效果如下:

    效果

    效果

    分析

    验证码实现步骤:

    • canvas画布
    • 生成随机100以内的简单整数四则运算
    • 随机颜色
    • 背景色(可固定色)
    • 噪音线设置
    • 绘制验证码

    其他一些基础内容也包含其中,如点击验证码刷新、点击下一步验证等操作。

    步骤实现:

    注:本案例基于vue操作,UI使用element完成,原生js同样道理

    1. canvas画布

    html

    <!-- 输入框 -->
    <input v-model="inputCode" placeholder="请输入右侧图案的值" />
    <!-- canvas画布:验证码 -->
    <canvas ref="checkCode" @click="getCode"></canvas>
    <!-- 按钮 -->
    <button @click="checkMe">下一步</button>
    

    js

    // 需要的数据
    data() {
        return {
            inputCode: '',  // 输入的值
            checkCode: '',  // 图片验证码的值
            expressValue: '',  // 表达式的值
            // canvas各种设置
            cvs: {
                w: 100, // 给出默认宽度  宽度会在图片绘制时根据长度更改
                h: 40,  // 高 与input保持一致
                fontSize: 24,   // 字体大小
                str: '+-*',  // 符号生成范围
                line: 3 // 噪音线个数
            }
        }
    }
    

    2. 生成随机表达式

    • 写一个随机整数生成器,在各个环节都会用到
    • 生成随机字符串,长度是在data里面cvs中对应长度
    // 随机整数生成器,范围[0, max)
    rInt(max) {
        return Math.floor(Math.random() * 100000 % max);
    },
    
    // 生成随机表达式
    rCode() {
        let a = this.rInt(100);
        let b = this.rInt(10);
        let op = this.cvs.str.charAt(this.rInt(this.cvs.str.length));
        // 表达式
        let code = `${a}${op}${b}=`;
        this.checkCode = code;
        // 表达式的值
        this.expressValue = eval(code.substr(0, code.length - 1));
        return code;
    },
    

    3. 生成随机颜色

    • rgba格式
    • a:透明度,取值为0.5-1
     // 生成随机颜色 rgba格式
    rColor() {
        let a = ((Math.random()*5 + 5) / 10).toFixed(2);
        return `rgba(${this.rInt(256)}, ${this.rInt(256)}, ${this.rInt(256)}, ${a})`
    },
    

    4. 开始绘制

    • 方法接收一个dom对象
    • 判断浏览器对canvas支持程度
    • 取随机字表达式
    • 设置canvas宽高大小
    • 绘制

    具体过程如下:

    // 验证码图片绘制
    drawCode(domCvs) {
        let _this = this;
        // 随机表达式
        let checkCode = this.rCode();
        // 宽设置
        this.cvs.w = 10 + this.cvs.fontSize * this.checkCode.length;
    
        // 判断是否支持canvas
        if (domCvs !== null && domCvs.getContext && domCvs.getContext('2d')) {
            // 设置显示区域大小
            domCvs.style.width = _this.cvs.w;
            // 设置画板宽高
            domCvs.setAttribute('width', _this.cvs.w);
            domCvs.setAttribute('height', _this.cvs.h);
            // 画笔
            let pen = domCvs.getContext('2d');
            // 背景: 颜色  区域
            pen.fillStyle = '#eee';
            pen.fillRect(0, 0, _this.cvs.w, _this.cvs.h);
            // 水平线位置
            pen.textBaseline = 'middle';   // top middle bottom
            // 内容
            for (let i = 0; i < _this.checkCode.length; i++) {
                pen.fillStyle = _this.rColor(); // 随机颜色
                pen.font = `bold ${_this.cvs.fontSize}px 微软雅黑`; // 字体设置
                // 字符绘制: (字符, X坐标, Y坐标)
                pen.fillText(checkCode.charAt(i), 10 + _this.cvs.fontSize * i, 17 + _this.rInt(10));
            }
            // 噪音线
            for (let i = 0; i < _this.cvs.line; i++) {
                // 起点
                pen.moveTo(_this.rInt(_this.cvs.w) / 2, _this.rInt(_this.cvs.h));
                // 终点
                pen.lineTo(_this.rInt(_this.cvs.w), _this.rInt(_this.cvs.h));
                // 颜色
                pen.strokeStyle = _this.rColor();
                // 粗细
                pen.lineWidth = '2';
                // 绘制
                pen.stroke();
            }
    
        } else {
            this.$message.error('不支持验证码格式,请升级或更换浏览器重试');
        }
    },
    

    5. 绑定canvas的dom元素

    html

    <canvas class="codeCanvas" ref="checkCode" @click="getCode"></canvas>
    

    js:getCode方法

    // vue的话可直接用$refs取值,不用vue的话可绑定id然后通过document处理
    let domCvs = this.$refs.checkCode;
    this.drawCode(domCvs);
    

    6. 完成~

    • 在页面初始化的时候,也来一个验证码

    • 点击下一步, 验证datainputCodeexpressValue的值是否一样即可。注意,直接使用eval验证即可

    • 页面初始化

    // 初始化先搞一个验证码~点击canvas的时候重新执行getCode()
    mounted() {
        // 获取验证码图
        this.getCode();
    }
    
    • 验证
    checkMe() {
        // 空、 错误、 正确 三个判断
        if (this.inputCode) {
            if (eval(this.inputCode) === eval(this.expressValue)) {
                // 验证成功要做的事
                this.$message.success('验证成功');
            } else {
                // 验证码有误
                this.$message.warning('错误,请重新输入');
            }
        } else {
            // 输入为空
            this.$message.warning('请输入右侧结果');
        }
    }
    

    结语

    ok,常用的简单算术验证码大致就是这样子了~

    本篇案例源码可关注公众号【流眸】回复【20630】获取哟~


    流眸

    相关文章

      网友评论

        本文标题:常用验证码之算术验证码

        本文链接:https://www.haomeiwen.com/subject/hhsxqktx.html