什么是图形验证码

图形验证码是验证码的一种。验证码（CAPTCHA）是“Completely Automated Public Turing test to tell Computers and Humans Apart”（全自动区分计算机和人类的图灵测试的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试，实际上用验证码是现在很多网站通行的方式。

既然图形验证码是为了区分机器和人之间的操作，那么我们就可以在图形上绘制一个只有人可以解答的问题。比较常见的是在图片上生成文字验证码，然后用户输入图片上的文字吻合则验证通过。

虽然这种验证方法已经渐渐的被其他更先进的方法所淘汰了（图片上的文字依然可以被程序识别读取），并且前端生成验证码的方式相较于后端安全性不高，但我们的目的只是为了装x，提升程序的安全性只是附带的效果。

登录表单

首先我们需要在在登录表单上额外添加用于输入验证码的FormItem，并且给图形验证码提供一个canvas容器。有时候生成的验证码看不明白，因此需要给验证码添加点击事件用以切换验证码：

<Form ref="loginForm" :model="form" :rules="rules"><FormItem prop="userName"><Input v-model="form.userName" placeholder="请输入用户名"><span slot="prepend"><Icon :size="16" type="person"></Icon></span></Input></FormItem><FormItem prop="password"><Input type="password" v-model="form.password" placeholder="请输入密码"><span slot="prepend"><Icon :size="14" type="locked"></Icon></span></Input></FormItem><FormItem prop="valiCode" v-show="this.count"><Input v-model="form.valiCode" placeholder="请输入验证码"><span slot="prepend"><Icon :size="14" type="ios-analytics"></Icon></span></Input><div class="canvas" @click="getImgYanzheng"><canvas id="canvas"></canvas></div></FormItem><FormItem><Button @click="handleSubmit" type="primary" long>登录</Button></FormItem>
</Form>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

需要用到的属性

表单需要额外添加valiCode用以记录用户输入的验证码。此处我们定义当用户登录失败一次则需要额外输入图形验证码，因此添加count属性，当登陆失败时count++，当然这样的处理方式并不是很严谨，并且用户刷新页面count则会清零。可以在此处可以增加更多限制，如异地登录等，由于本案例完全没有涉及到后端程序，因此只是简单的以count为判断依据。

data() {return {form: {userName: "",// 用户名password: "",// 密码valiCode: ""// 验证码},count: 0, // 登录次数show_num: [],// 图形上的文字}
}

生产图形验证码

页面上为canvas容器绑定的方法getImgYanzheng就是在绘制图形验证码

。在绘制图形验证码时需要为你的验证码定义一个内容集合，此处使用的是：A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,医,生。字母中剔除了容易误识别的几个字母并且可以随意加入文字（因此图形验证码也可在做成随机生成四个文字让用户点击，或者生成成语让用户填空等等各种形式）。并且忽略用户大小写，因此需要用到toLowerCase方法。

接下来就是canvas绘图的一些技巧了。

canvas绘图

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");

在JavaScript 中使用 id 来寻找 canvas 元素，然后创建context对象，getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。我们可以把canvas 想象成景色而context则是景色呈现的画布。

由于绘制验证码的过程中是从左往右绘制的，因此需要规划好画布的使用范围，另外在验证码绘制时还要加上一些随机的元素使验证码不容易被程序识别。

getImgYanzheng() {var show_num = [];var canvas_width = 150; //document.getElementById("canvas").style.width;var canvas_height = 30; //document.getElementById("canvas").style.height;var canvas = document.getElementById("canvas"); //获取到canvas的对象，景色var context = canvas.getContext("2d"); //获取到canvas画图的环境，景色呈现的画布canvas.width = canvas_width;canvas.height = canvas_height;var sCode ="A,B,C,E,F,G,H,J,K,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,好,医,生";var aCode = sCode.split(",");var aLength = aCode.length; //获取到数组的长度for (var i = 0; i <= 3; i++) {var j = Math.floor(Math.random() * aLength); //获取到随机的索引值var deg = (Math.random() * 30 * Math.PI) / 180; //产生0~30之间的随机弧度var txt = aCode[j]; //得到随机的一个内容show_num[i] = txt.toLowerCase();var x = 10 + i * 20; //文字在canvas上的x坐标var y = 20 + Math.random() * 8; //文字在canvas上的y坐标context.font = "bold 23px 微软雅黑";context.translate(x, y);context.rotate(deg);context.fillStyle = this.randomColor();context.fillText(txt, 0, 0);context.rotate(-deg);context.translate(-x, -y);}for (var i = 0; i <= 5; i++) {//验证码上显示线条context.strokeStyle = this.randomColor();context.beginPath();context.moveTo(Math.random() * canvas_width,Math.random() * canvas_height);context.lineTo(Math.random() * canvas_width,Math.random() * canvas_height);context.stroke();}for (var i = 0; i <= 30; i++) {//验证码上显示小点context.strokeStyle = this.randomColor();context.beginPath();var x = Math.random() * canvas_width;var y = Math.random() * canvas_height;context.moveTo(x, y);context.lineTo(x + 1, y + 1);context.stroke();}this.show_num = show_num;},web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

验证码及线条需要一些随机的颜色：

randomColor() {//得到随机的颜色值var r = Math.floor(Math.random() * 256);var g = Math.floor(Math.random() * 256);var b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")";}

有了以上两个方法，图形验证码就已经生成完毕了，接下来就是使用的问题了。

使用图形验证码

判断登录次数count，如果登录次数大于0则需要输入验证码：

const self = this;
if (this.count) {if (this.form.valiCode) {if (this.show_num.join("") != this.form.valiCode.toLowerCase()) {self.$Notice.warning({title: "验证码错误"});return;}} else {self.$Notice.warning({title: "请输入验证码"});return;}}

当登录失败时需要执行count++并且刷新验证码：

self.count++;
self.getImgYanzheng();
self.$Notice.warning({
title: "登陆失败",
desc: rs.data.msg
});

对程序员，web前端感兴趣，想要了解学习的，打算深入了解这个行业的朋友，可以加下我们的前端学习扣qun : 784783012 ，不论你是学生还是想转行的朋友，我都欢迎，不定期分享干货，整理的一份2019最新的web前端学习资料和0基础入门教程分享给大家，学习前端我们是认真的

此时就完成了一个图形验证码的添加工作，同学们快装起来吧。

web前端入门到实战：实现图形验证码相关推荐

html前端页面的基本骨架是,web前端入门到实战：css实现的骨架屏方案
web前端入门到实战:css实现的骨架屏方案发布时间:2020-08-04 01:32:03 来源:51CTO 阅读:152 作者:前端向南优点简单,不需要工程,不用puppeteer生成骨架d ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...
web前端入门到实战：css绘制各种形状图形
虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习. 一.实心圆 .circle {width: 120px; ...
web前端入门到实战：CSS mix-blend-mode滤色screen混合模式
一.滤色screen混合模式速览 screen混合模式,国内称为"滤色",其计算公式是: 公式中的C表示最终混合的RGB色值(范围是0-255),A和B表示用来混合的两个颜色的RG ...
web前端入门到实战：HTML5新增和废弃的标签
一.废弃的标签以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定 ...
web前端入门到实战：HTML5 VideoAPI，打造自己的Web视频播放器
本文将使用HTML5提供的VideoAPI做一个自定义的视频播放器,需要用到HTML5提供的video标签.以及HTML5提供的对JavascriptAPI的扩展. 一.基础知识 1.用法 <v ...
web前端入门到实战：3种姿势实现26个英文字母的案例
一.借助CSS border实现案例实现效果如下(为实时渲染效果): 如何使用? 引用CSS文件,例如: <link rel="stylesheet" href=" ...
web前端入门到实战：HTML属性选择器（下）
一.格式标签[属性=值]:{属性:值:} 1.属性的取值是以什么开头的 attribute |= value(CSS2)attribute^=value(CSS3)两者之间的区别:CSS2中只能找到 ...
web前端入门到实战：css+svg实现b站充电效果
css+svg实现b站充电效果难点 svg图形的两块蒙版制作先上代码这是左边粉色框框的内容这个没啥好说的 <div id="con"><div id=&q ...

web前端入门到实战：实现图形验证码