Vue--前端实现验证码

Vue–前端实现验证码

效果为：

实现的大概思路就是， A-z/1-10中随机选取6个数字，再进行canvas绘图，其中可以加入干扰识别的线和点

封装方法

放于公共文件comm.js中

  /**
   *  验证码校验
   *  value : 校验值
   *  code ：生成的验证码值
   *  isUpperCase :是否区分大小写
   */

  validate: function(value, code, isUpperCase = false) {
    let inputCode
    return new Promise(function(resolve, reject) {
      if (!isUpperCase) {
        inputCode = value
      } else {
        inputCode = value.toUpperCase()
      }
      // 取得输入的验证码并转化为大写
      if (inputCode.length <= 0) {
        // 若输入的验证码长度为0
        reject(false)
      } else if (inputCode != code) {
        reject(false)
      } else {
        // 输入正确时
        resolve(true)
      }
    })
  },
  /**
   *  生成验证码
   *  length : 验证码长度
   */
  identicalCode: function(length = 4) {
    return new Promise(function(resolve) {
      let code = ''
      let codeLength = length // 验证码的长度
      // 随机数
      let random = [
        0,
        1,
        2,
        3,
        4,
        5,
        6,
        7,
        8,
        9,
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
        'a',
        'b',
        'c',
        'd',
        'e',
        'f',
        'g',
        'h',
        'i',
        'j',
        'k',
        'l',
        'm',
        'n',
        'o',
        'p',
        'q',
        'r',
        's',
        't',
        'u',
        'v',
        'w',
        'x',
        'y',
        'z'
      ]
      for (let i = 0; i < codeLength; i++) {
        // 循环操作
        let index = Math.floor(Math.random() * 62) // 取得随机数的索引（0~52）
        code += random[index] // 根据索引取得随机数加到code上
      }
      resolve(code)
    })
  },
  /**
   * 绘制验证码图片
   * canvasId 为验证码canvas图片id
   * code验证码上面的文字
   */
  canvasCode: function(canvasId, code) {
    const fontSizeMin = 25, // 最小字体
      fontSizeMax = 35, // 最大字体
      contentWidth = 220, // 画布宽度
      contentHeight = 50 // 画布高度
    // 获取挂载到的DOM的id
    const canvas = document.getElementById(canvasId)
    canvas.width = contentWidth // 设置画布宽高
    canvas.height = contentHeight
    //创建画布
    const cv = canvas.getContext('2d')
    cv.textBaseline = 'bottom'
    // 绘制背景
    cv.fillStyle = randomColor(200, 220)
    cv.fillRect(0, 0, contentWidth, contentHeight)
    //8cv.font = 'italic 700 50px/100px 宋体'
    for (let i = 0; i < code.length; i++) {
      drawText(cv, code[i], i)
    }
    drawLine(cv)
    drawDot(cv)

    // 生成一个随机数
    function randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    }
    // 生成一个随机的颜色
    function randomColor(min, max) {
      let r = randomNum(min, max)
      let g = randomNum(min, max)
      let b = randomNum(min, max)
      return 'rgb(' + r + ',' + g + ',' + b + ')'
    }
    function drawText(cv, txt, i) {
      cv.fillStyle = randomColor(50, 160) //随机生成字体颜色
      cv.font = randomNum(fontSizeMin, fontSizeMax) + 'px SimHei' //随机生成字体大小
      let x = (i + 1) * (contentWidth / (code.length + 1))
      let y = randomNum(fontSizeMax, contentHeight - 5)
      var deg = randomNum(-30, 30)
      // 修改坐标原点和旋转角度
      cv.translate(x, y)
      cv.rotate((deg * Math.PI) / 180)
      cv.fillText(txt, 0, 0)
      // 恢复坐标原点和旋转角度
      cv.rotate((-deg * Math.PI) / 180)
      cv.translate(-x, -y)
    }

    function drawLine(cv) {
      // 绘制干扰线
      for (let i = 0; i < 4; i++) {
        cv.strokeStyle = randomColor(100, 200)
        cv.beginPath()
        cv.moveTo(randomNum(0, contentWidth), randomNum(0, contentHeight))
        cv.lineTo(randomNum(0, contentWidth), randomNum(0, contentHeight))
        cv.stroke()
      }
    }
    function drawDot(cv) {
      // 绘制干扰点
      for (let i = 0; i < 30; i++) {
        cv.fillStyle = randomColor(0, 255)
        cv.beginPath()
        cv.arc(
          randomNum(0, contentWidth),
          randomNum(0, contentHeight),
          1,
          0,
          2 * Math.PI
        )
        cv.fill()
      }
    }
  },

页面中应用

1)创建画布

<canvas id="myCanvas"></canvas>

2）在methods中调用方法

    // 刷新验证码
    refreshCode() {
      let that = this
      that.$commJs.identicalCode(6).then(res => {
        //console.log(res)
        that.validateCode = res
        that.$commJs.canvasCode('myCanvas', res)
      })
    },
    // 验证密码，是否正确
    confirm() {
      if (this.codeShow) {
        this.$commJs.validate(this.inputVal, this.validateCode)
          .then(res => {
            if (res) {
              this.$msg.success('验证成功！')
              this.codeShow = false
            }
          })
          .catch(() => {
            this.refreshCode()
            this.inputVal = ''
            this.$msg.error('验证错误！')
          })
      } else {
        //console.log('关闭')
        this.outerVisible = false
      }
    },

完结散花…