图片验证码处理

有些业务场景，当用户多次操作失败之后会增加图片验证码的操作；又或者在登录操作的时候加上图片验证码，防止恶意暴力破解密码。那前端该如何处理呢？其实很简单，有两种方式，一个是通过后端，一种是前端自己弄。1.后端生成图片验证码，前端直接渲染就可以了，后端可以返回图片验证码的url链接，也可以直接返回图片文件，这里面有个坑，当后端直接返回图片的时候我们前端如何渲染呢？折腾了一会儿，网上也搜了各种方法多不是很好，其实很简单，直接把后端图片验证码接口的地址放到img标签的src里面，img控件会自动获取并解析资源。
那我们怎么实现点击图片图片验证码就会变化呢？后端图片验证码一般是通过一个随机数来生成的，我们传的值不同，生成的验证码就不同，所以我们可以把含随机数参数的接口地址放到img src里面，点击时重新更新下src值就可以了。相关代码如下：

//html
<img :src="picUrl" @click="changePicCode">
//js
var picUrl = 'http://www.xxxxxx.xxx/api/pic_code/?t=' +  Math.random().toString();
changePicCode() {
    this.picUrl = 'http:/www.xxxxxx.xxx/api/pic_code/?t=' +  Math.random().toString();
}

代码中t的值就是一个随机数，后端会根据它的值来生成图片验证码。

2.前端通过一个js文件，它是一个函数，每次调用都会返回一个对象包含一个base64格式图片文件及图片文件上的验证码，js如下：

window.verifyCode=function verifyCode(e){if(e&&typeof e!=='object'){return new TypeError('Param `options` is not a object')}e=e||{};e.width=e.width||90;e.height=e.height||30;e.baseBackgroundColor=e.baseBackgroundColor||'#fff';e.codeLength=e.codeLength||4;var g=function(a,b){return a+Math.random()*(b-a)};var h=function(a,b){return Math.floor(Math.random()*(b-a))+a};var k='abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPRSTUVWXYZ23456789'.split('');var l='';var m=document.createElement('canvas');m.width=e.width;m.height=e.height;var n=m.getContext('2d');n.fillStyle=e.baseBackgroundColor;n.fillRect(0,0,e.width,e.height);n.globalAlpha=0.8;n.font='15px sans-serif';for(var i=0;i<10;i++){n.fillStyle='rgb('+h(160,230)+','+h(160,230)+','+h(160,230)+')';for(var j=0;j<5;j++){n.fillText(k[h(0,k.length)],g(-10,e.width+10),g(-10,e.height+10))}}var o='rgb('+h(0,120)+','+h(0,120)+','+h(0,120)+')';n.font='bold 30px sans-serif';for(var i=0;i<e.codeLength;i++){var j=h(0,k.length);n.fillStyle=o;n.fillText(k[j],5+i*23,25);var a=g(0.85,1.0);var b=g(-0.04,0);var c=g(-0.3,0.3);var d=g(0.85,1.0);n.transform(a,b,c,d,0,0);l+=k[j]};n.beginPath();n.strokeStyle=o;var A=g(10,e.height/2);var b=g(e.height/4,3*e.height/4);var f=g(e.height/4,3*e.height/4);var T=g(e.height*1.5,e.width);var w=2*Math.PI/T;var S=function(x){return A*Math.sin(w*x+f)+b};n.linewidth=5;for(var x=-20;x<200;x+=4){n.moveTo(x,S(x));n.lineTo(x+3,S(x+3))};n.closePath();n.stroke();return{code:l,dataURL:m.toDataURL()}};

把该方法放到window上这样就可以全局使用，每调用一次verifyCode函数就会重新生成url和code 例如：

const res = verifyCode();
res.dataURL //base64文件 直接放到<img>标签src属性就可以渲染出来了
res.code //图片上的验证码 和用户输入进行匹配 验证用户是否输入正确