常用验证码之算术验证码

写在前面

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

算术验证码示例

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

实现:算术验证码

一般来讲,字符串、算数、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('请输入右侧结果');
    }
}

本文分享自微信公众号 - 流眸(zxm0146),作者:流眸

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-30

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 常用验证码之字符串验证码

    这么多场景中用到验证码,它到底有什么用?作为前端开发者,如何去实现呢?接下来步入正题。

    流眸
  • 520特辑———旋转爱

    520:网络情人节是信息时代的爱情节日,定于每年的5月20日和5月21日。该节日源于歌手范晓萱的《数字恋爱》中“520”被喻成“我爱你” ,以及...

    流眸
  • 秒懂——惹人烦恼的this指向

      This是什么?什么是this指针?this指针指向哪里?何时使用this? useornotuse,thatisa question.  其中至关重要的 ...

    流眸
  • RocketMQ 同步复制 SLAVE_NOT_AVAILABLE 异常源码分析

    最近在 RocketMQ 钉钉官方群中看到有人反馈说 broker 主从部署,在发布消息的时候会报 SLAVE_NOT_AVAILABLE 异常,报这个异常的前...

    张乘辉
  • PHP高级编程之消息队列

    PHP高级编程之消息队列 摘要 2015-10-19 第一版 2016-11-31 第二版 目录 1. 什么是消息队列 2. 为什么使用消息队列 3. 什么场合...

    netkiller old
  • 使用Express+TypeScript编写后台服务

    最近接到一个比较简单的任务,需求如下: 1、从MQTT服务器订阅断电报警信息然后入库到SQLServer或者MySQL数据库中 2、从MQTT服务器订阅到站...

    ccf19881030
  • PHP高级编程之消息队列原理与实现方法详解

    本文实例讲述了PHP高级编程之消息队列原理与实现方法。分享给大家供大家参考,具体如下:

    砸漏
  • 在 Vue 对象模块内如何使用 this 对象?

    众所周知,js 中的 this 对象在不同作用域下指代不同的对象实例,并且在以下 4 种场景中经常会“不知所向”:

    李艺
  • Flutter基础widgets教程-DataTable篇

    青年码农
  • Flutter基础widgets教程-DataTable篇

    青年码农

扫码关注云+社区

领取腾讯云代金券