JS验证码

最新推荐文章于 2023-05-13 22:49:37 发布

Z_Truble

最新推荐文章于 2023-05-13 22:49:37 发布

阅读量198

点赞数 3

文章标签： html5 javascript

本文链接：https://blog.csdn.net/Z_Truble/article/details/127793393

版权

一点心意，不喜勿喷

需要下载JS文件captcha-mini.js

//引入JS
    <script src="/captcha-mini.js"></script>
<script>
    const btn = document.querySelector("#btn");
    const code = document.querySelector("#code");


    //保存真是验证码
    let trueCode = "";
    //验证码插件的使用
    let captcha1 = new CaptchaMini();
    captcha1.draw(document.querySelector('#captcha1'), function (r) {
        // console.log(r, '验证码1');
        trueCode = r;
    });

    btn.addEventListener('click', function () {
        //获取input用户输入值
        let iptVal = code.value;
        console.log(iptVal);
        console.log(trueCode);
        //比较
        //全部装换成大写或者小写
        if (iptVal.toUpperCase() == trueCode.toUpperCase()) {
            console.log('验证通过');
        } else {
            console.log('验证通过');
        }
    })
</script>

<body>
    <input type="text" class="ipt" placeholder="请输入验证码" id="code">

    <!-- 画布--绘图 -->
    <canvas width="120" height="50" id="captcha1"></canvas>

    <button id="btn">按钮</button>
</body>

验证码JS文件代码

/**
 * Created by saucxs on 2019/3/1.
 */

function CaptchaMini(params = {}) {
  let middleParams = Object.assign({
      lineWidth: 0.5,   //线条宽度
      lineNum: 2,       //线条数量
      dotR: 1,          //点的半径
      dotNum: 15,       //点的数量
      preGroundColor: [10, 80],    //前景色区间
      backGroundColor: [150, 250], //背景色区间
      fontSize: 20,           //字体大小
      fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'],  //字体类型
      fontStyle: 'fill',      //字体绘制方法，有fill和stroke
      content: 'acdefhijkmnpwxyABCDEFGHJKMNPQWXY12345789',  //验证码内容
      length: 4    //验证码长度
  }, params);
  Object.keys(middleParams).forEach(item => {
      this[item] = middleParams[item];
  });
  this.canvas = null;
  this.paint = null;
};

/*Captcha的原型上绑定方法
* 获取区间的随机数
* params []*/
CaptchaMini.prototype.getRandom = function (...arr) {
  arr.sort((a,b) => a - b);
  return Math.floor(Math.random() * (arr[1] - arr[0]) + arr[0]);
};

/*Captcha的原型上绑定方法
* 获取随机颜色
* params []*/
CaptchaMini.prototype.getColor = function (arr) {
  let colors = new Array(3).fill('');
  colors = colors.map(item => this.getRandom(...arr));
  return colors
};

/*Captcha的原型上绑定方法
* 获取验证码*/
CaptchaMini.prototype.getText = function () {
  let length = this.content.length;
  let str = '';
  for (let i = 0;i < this.length; i++) {
      str += this.content[this.getRandom(0, length)];
  }
  return str;
};

/*Captcha的原型上绑定方法
* 绘制线条*/
CaptchaMini.prototype.line = function () {
  for (let i = 0;i < this.lineNum; i++) {
      /*随机获取线条的起始位置*/
      let x = this.getRandom(0, this.canvas.width);
      let y = this.getRandom(0, this.canvas.height);
      let endX = this.getRandom(0, this.canvas.width);
      let endY = this.getRandom(0, this.canvas.height);

      this.paint.beginPath();
      this.paint.lineWidth = this.lineWidth;

      /*获取颜色路径*/
      let colors = this.getColor(this.preGroundColor);
      this.paint.strokeStyle = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';

      /*绘制路径*/
      this.paint.moveTo(x, y);
      this.paint.lineTo(endX, endY);
      this.paint.closePath();
      this.paint.stroke();
  }
};

/*Captcha的原型上绑定方法
* 绘制圆点*/
CaptchaMini.prototype.circle = function () {
  for (let i = 0; i < this.dotNum; i++) {
      /*随机获取圆心*/
      let x = this.getRandom(0, this.canvas.width);
      let y = this.getRandom(0, this.canvas.height);
      this.paint.beginPath();
      /*绘制圆*/
      this.paint.arc(x, y, this.dotR, 0, Math.PI * 2, false);
      this.paint.closePath();
      /*随机获取路径颜色*/
      let colors = this.getColor(this.preGroundColor);
      this.paint.fillStyle = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';
      /*绘制*/
      this.paint.fill();
  }
};


/*Captcha的原型上绑定方法
* 绘制文字*/
CaptchaMini.prototype.font = function () {
let str = this.getText();
this.callback(str);
/*指定文字风格*/
  this.paint.font = this.fontSize + 'px ' + this.fontFamily[this.getRandom(0, this.fontFamily.length)];
  this.paint.textBaseline = 'middle';
  /*指定文字绘制风格*/
  let fontStyle = this.fontStyle + 'Text';
  let colorStyle = this.fontStyle + 'Style';
  for (let i = 0; i < this.length; i++) {
      let fontWidth = this.paint.measureText(str[i]).width;
      let x = this.getRandom(this.canvas.width / this.length * i + 0.2 * fontWidth, (this.canvas.width / this.length) * i + 0.5 * fontWidth);
      /*随机获取字体的旋转角度*/
      let deg = this.getRandom(-6, 6);
      /*随机获取文字颜色*/
      let colors = this.getColor(this.preGroundColor);
      this.paint[colorStyle] = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';
      /*开始绘制*/
      this.paint.save();
      this.paint.rotate(deg * Math.PI / 180);
      this.paint[fontStyle](str[i], x, this.canvas.height / 2);
      this.paint.restore();

  }
};

/*Captcha的原型上绑定方法
* 绘制图形*/
CaptchaMini.prototype.draw = function (dom, callback = function () {}) {
  /*获取canvas的dom*/
  if (!this.paint) {
      this.canvas = dom;
      if (!this.canvas) return ;
      else this.paint = this.canvas.getContext('2d');
      /*回调函数赋值给this*/
      this.callback = callback;
      this.canvas.onclick = () => {
          this.drawAgain();
      }
  }
  /*随机画布颜色，使用背景色*/
  let colors = this.getColor(this.backGroundColor);
  this.paint.fillStyle = 'rgba(' + colors[0] + ',' + colors[1] + ',' + colors[2] + ',' + '0.8)';

  /*绘制画布*/
  this.paint.fillRect(0, 0, this.canvas.width, this.canvas.height);

  /*绘图*/
  this.circle();
  this.line();
  this.font();
};

/*Captcha的原型上绑定方法
* 清空画布*/
CaptchaMini.prototype.clear = function () {
  this.paint.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

/*Captcha的原型上绑定方法
* 重新绘制*/
CaptchaMini.prototype.drawAgain = function () {
  this.clear();
  this.draw(this.callbak);
};

if (typeof module !== 'undefined' && !module.nodeType && module.exports) {
  module.exports = CaptchaMini;
}

window.CaptchaMini=CaptchaMini;