web前端制作图形验证码

web前端制作图形验证码

我们需在登录表单中增设一个用于输入验证码的表单项，并为图形验证码设置一个canvas画布。由于有时生成的验证码难以辨认，故需为验证码添加点击功能，以便实现验证码的更换。

    
        
            
                
            
        
    
    
        
            
                
            
        
    
    
        
            
                
            
        
        

            
        
    
    
        登录
    

需要用到的属性

表单中需额外加入valiCode字段来记录用户的验证码输入。在此情况下，我们设定用户每次登录失败后，都必须额外输入图形验证码。为此，我们引入了count属性，每当登录失败发生时，count值将增加。然而，这种处理方法并不十分严密web前端制作图形验证码，而且用户在刷新页面后，count值会重置为零。对此处登录实施额外限制，例如异地访问控制等，鉴于本案例并未深入涉及后端编程，故仅以计数器值作为判断标准。

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

生产图形验证码

页面上所绑定的方法名为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内部进行。

获取文档中ID为"myCanvas"的元素，并将其赋值给变量c。
var cxt=c.getContext("2d");

在JavaScript编程语言中，我们通过id属性定位canvas元素，进而构建context对象。这里的getContext("2d")对象是HTML5内置的，它提供了丰富的绘图功能，包括绘制路径、矩形、圆形、文本以及插入图像等。将canvas视作一幅风景，那么context对象便是呈现这幅风景的画布。

在绘制验证码时，由于绘制顺序是从左至右进行的，这就要求我们事先合理规划画布的可用区域。同时，在绘制过程中，还需融入一些随机元素，以增强验证码的识别难度前端图片验证码怎么做，防止其被程序轻易识别。

getImgYanzheng() {
      var show_num = [];
canvas的宽度被设定为150像素，这一值等同于通过获取ID为"canvas"的元素的样式宽度。
canvas的高度被设置为30像素，这一值等同于通过获取ID为"canvas"的元素的样式高度。
通过document.getElementById方法，我成功获取了名为"canvas"的元素，它将作为绘画的画布，用于呈现景色。
canvas画布的绘图环境已被成功获取，即创建了用于景色展示的绘图上下文。
canvas的宽度被设置为canvas_width的值。
canvas的高度被设置为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至9、0，以及“好”和“医生”等字符。
定义变量aCode，通过将字符串sCode以逗号为分隔符进行分割操作。
aCode的长度信息已成功获取，并存储在变量aLength中。
      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;
    },

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

randomColor() {
      //得到随机的颜色值
r等于256乘以随机数再向下取整的结果。
定义变量g，其值为通过Math.random()函数生成的介于0和1之间的随机数与256相乘后，使用Math.floor()函数向下取整得到的结果。
定义变量b，其值为通过Math.random()函数生成的介于0到1之间的随机数乘以256，然后使用Math.floor()函数将结果向下取整至最接近的整数。
返回字符串"rgb(" + r + "," + g + "," + b + ")"。
    }

采用上述两种手段，图形验证码的生成过程便已完成，随后便进入了如何应用这一验证码的阶段。

使用图形验证码

对登录次数count进行评估，若该次数超出零，便需提供验证码。

const self = this;
if (this.count) {
若此表单验证码有效，{
若（当前显示的数字序列转换为字符串后与表单中的验证码值进行大小写不敏感的比较）不匹配，{
标题：确认码输入有误
                });
                return;
            }
        } else {
以便用户及时了解相关情况。
输入验证码提示：请输入验证码
            });
            return;
        }
    }

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

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

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