vue项目图片滑动验证码前端+后端验证结合两篇文章弄出完美demovue项目图片滑动验证码前端+后端验证使用G

首先看这篇文章

www.cnblogs.com/steamed-twi…

基本前端代码直接照搬这位老兄的这篇文章里说的 captha.vue 组件作者在github上是改成了 Newcap.vue 组件

然后我们采用的是前后端结合的形式

如果后端返回的那张能滑动的小图没有轮廓也可能不是很明显因此我找到了另一篇文章 www.csdn.net/tags/MtTaMg… 精华内容第一篇文章这篇文章里说是使用了开源的一个针对canvas上的图片画轮廓的代码找到使用调用MarchingSquaresJS的方法那部分代码我根据第一篇文章的验证码组件调整了下代码

function drawOutline(){
        let pathPoints = MarchingSquares.getBlobOutlinePoints(this.block);
        let points = [];
       
        for(let i = 0;i < pathPoints.length;i += 2){
          points.push({
            x:pathPoints[i],
            y:pathPoints[i + 1],
          })
        }
        this.blockCtx.beginPath();
        this.blockCtx.lineWidth = 2;
        this.blockCtx.strokeStyle = '#00CCFF';
        this.blockCtx.moveTo(points[0].x, points[0].y);
        for (let i = 1; i < points.length; i += 1) {
          let point = points[i];
          this.blockCtx.lineTo(point.x,point.y);
        }
        this.blockCtx.closePath();
        this.blockCtx.stroke();
        
        this.blockCtx.drawImage(this.block,0,0);
      }