tanyupeng/js/VerificationCode.js

通过自定义指令实现一些有趣的操作,图片放大 , 字符串转图片验证码

//此文件返回一个自定义指令
function code(canvas, bindings) {
  let code = bindings.value.code
  canvas.height = bindings.value.height ? bindings.value.height : 40
  canvas.width = bindings.value.width ? bindings.value.width : 120
  for (let i = 0; i <= code.length; i++) {
    if (i > 4) {
      canvas.width += 26;

    }
  }

  function rn(min, max) {
    return parseInt(Math.random() * (max - min) + min)
  }
  function rc(min, max) {
    let r = rn(min, max);
    let g = rn(min, max);
    let b = rn(min, max);
    return `rgb(${r},${g},${b})`
  }
  var ctx = canvas.getContext('2d')// 在canvas上绘制背景颜色
  ctx.fillStyle = rc(180, 230)
  ctx.fillRect(0, 0, canvas.width, canvas.height)
  // 随机字符串
  let arr = code.toString().split('')
  let result = ''
  for (var i = 0; i < arr.length; i++) {
    var c = arr[i]
    // 随机出字体大小
    let min = 26
    let max = 26
    if (code.length == 5) max = 28
    if (code.length == 6) max = 30
    // if(code.length==5) max=24
    // console.log('宽度', canvas.width);
    var fs = rn(min, max);
    // 随机字母数字的旋转角度
    var deg = rn(-10, 20);
    ctx.font = fs + 'px Simhei';
    ctx.textBaseline = 'top';
    //设置字体的填充颜色
    ctx.fillStyle = rc(80, 150);
    ctx.save();
    ctx.translate(30 * i + 8, 8);
    ctx.rotate(deg * Math.PI / 180);
    ctx.fillText(c, 0, 0);
    ctx.restore();
    result += c;
  }

  // 随机生成干扰线
  for (var i = 0; i < 5; i++) {
    ctx.beginPath();
    ctx.moveTo(rn(0, canvas.width), rn(0, canvas.height));
    ctx.lineTo(rn(0, canvas.width), rn(0, canvas.height));
    ctx.strokeStyle = rc(180, 230);
    ctx.closePath();
    ctx.stroke()
  }
}

export default {
  mounted(canvas, bindings) {
    code(canvas, bindings)
  },
  beforeUpdate(canvas) {
    canvas.width = canvas.width;
    canvas.height = canvas.height;
  },
  updated(canvas, bindings) {
    code(canvas, bindings)
  }
}