前端图片滑动验证的两种方法

引言

在前端工程中，输入验证码是一个很常见的功能，之前有各种奇形怪状的字符验证码，到后面的图形验证码。这个东西其实只是为了证明你是个人而不是机器操作的电脑，顺便降低一下登录频率。
具体而言都是使用canvas绘画，目前有两种方案

方案一：

后端介入，图形的缺口和带缺口的卡片由后端提供，然后前端把移动距离发给后端进行校验，代码如下

效果图

后端传图.png

缺点：如上图所示，缺口处没有加边框，显示不清楚。这个也很好理解。图片均由后端提供， 前端只是在canvas画布上重绘，事先并不知道图片缺口在哪。

方案二：

从引言中可知，这个图片滑动验证本质上不需要后端参与，前端自行随机截取滑块，然后移动就行。参照vue组件vue-monoplasty-slide-verify即可
代码如下

其中通过函数draw()中的

ctx.lineWidth = 2
      ctx.fillStyle = 'rgba(255, 255, 255, 0.7)'
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.7)'

给缺口绘制边框是关键，绘制结果如下

前端自行选图.png